Vue3 性能优化

2023-12-24 05:48:38

代码分析
由于我们使用的是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打包

然后进行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
})],

文章来源:https://blog.csdn.net/weixin_45932157/article/details/135177407
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。