Vue——vue3 打包优化与资源压缩

背景问题：
需要优化打包体积和加载速度。

方案思考：
通过代码分割、压缩和资源优化来减少打包体积。

具体实现：
Vite配置优化：

// vite.config.jsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{compression}from'vite-plugin-compression'import{visualizer}from'rollup-plugin-visualizer'exportdefaultdefineConfig({plugins:[vue(),// Gzip压缩compression({algorithm:'gzip',threshold:10240// 超过10KB的文件进行压缩}),// 包分析工具visualizer({filename:'./dist/stats.html',open:true,gzipSize:true,brotliSize:true})],build:{rollupOptions:{output:{// 分包优化manualChunks:{// Vue核心库vue:['vue','vue-router','pinia'],// UI组件库element:['element-plus'],// 工具库utils:['lodash-es','axios'],// 图表库charts:['echarts']},// 或者使用函数方式更灵活地分包manualChunks(id){if(id.includes('node_modules')){if(id.includes('vue')||id.includes('pinia')||id.includes('vue-router')){return'vue'}if(id.includes('element-plus')){return'element'}if(id.includes('lodash')||id.includes('axios')){return'utils'}if(id.includes('echarts')){return'charts'}return'vendor'}}}},// 压缩配置minify:'terser',terserOptions:{compress:{drop_console:true,// 移除consoledrop_debugger:true,// 移除debuggerpure_funcs:['console.log']// 移除指定函数},format:{comments:false// 移除注释}},// 启用CSS分割cssCodeSplit:true},// 预加载脚本optimizeDeps:{include:['element-plus/lib/locale/lang/zh-cn'],// 预加载国际化文件}})

代码分割优化：

// utils/lazy-load.js// 动态导入工具函数exportclassLazyLoad{// 带错误处理的懒加载staticasynclazyImport(importFunction,retries=3){for(leti=0;i<retries;i++){try{returnawaitimportFunction()}catch(error){if(i===retries-1){throwerror}// 延迟后重试awaitnewPromise(resolve=>setTimeout(resolve,1000))}}}// 路由懒加载staticrouteLazyLoader(path){return()=>import(`../views${path}.vue`)}// 组件懒加载staticcomponentLazyLoader(path){return()=>import(`../components${path}.vue`)}// 带加载提示的懒加载staticasynclazyWithLoading(importFunction,setLoading){try{setLoading&&setLoading(true)constmodule=awaitimportFunction()returnmodule}finally{setLoading&&setLoading(false)}}}

路由懒加载：

// router/index.jsimport{createRouter,createWebHistory}from'vue-router'constroutes=[{path:'/',name:'Home',component:()=>import('@/views/Home.vue'),// 懒加载meta:{title:'首页'}},{path:'/about',name:'About',component:()=>import('@/views/About.vue'),// 懒加载meta:{title:'关于我们'}},// 按功能分组的懒加载{path:'/user',component:()=>import('@/layouts/index.vue'),children:[{path:'profile',name:'UserProfile',component:()=>import('@/views/user/Profile.vue'),meta:{title:'用户资料'}},{path:'settings',name:'UserSettings',component:()=>import('@/views/user/Settings.vue'),meta:{title:'用户设置'}}]},// 大型功能模块单独打包{path:'/admin',name:'Admin',component:()=>import('@/views/admin/index.vue'),meta:{title:'管理后台'},children:[{path:'dashboard',name:'AdminDashboard',component:()=>import('@/views/admin/Dashboard.vue'),meta:{title:'管理面板'}}]}]constrouter=createRouter({history:createWebHistory(),routes})exportdefaultrouter