Vue3 performance optimization

Code analysis.
Since we are using vite, vite packaging is based on rollup. We can use the rollup plug-in.

npm install rollup-plugin-visualizer

Remember to set open in vite.config.ts configuration, otherwise it will be invalid.

import {
    
     visualizer } from 'rollup-plugin-visualizer';
plugins: [vue(), vueJsx(),visualizer({
    
    
      open:true
 })],

Then perform npm run build packaging

Vite configuration optimization

build:{
    
    
       chunkSizeWarningLimit:2000,
       cssCodeSplit:true, //css 拆分
       sourcemap:false, //不生成sourcemap
       minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
       assetsInlineLimit:5000 //小于该值 图片将打包成Base64 
},

PWA offline storage technology

npm install vite-plugin-pwa -D

import {
    
     VitePWA } from 'vite-plugin-pwa' 
plugins: [vue(),VitePWA(), vueJsx(),visualizer({
    
    
      open:true
})],