Vue3 性能优化

代码分析
由于我们使用的是vite vite打包是基于rollup 的我们可以使用 rollup 的插件

npm install rollup-plugin-visualizer

vite.config.ts 配置 记得设置open 不然无效

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

然后进行npm run build打包

Vite 配置优化

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

PWA离线存储技术

npm install vite-plugin-pwa -D

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