摘要：Vue 项目在开发模式下没什么性能问题，但打包上线后如果没有优化，可能会遇到首屏加载慢、包体积过大、交互卡顿等情况。常见的 Vue 打包优化方案可以分为以下几个层面：
Vue 项目在开发模式下没什么性能问题，但打包上线后如果没有优化，可能会遇到 首屏加载慢、包体积过大、交互卡顿 等情况。常见的 Vue 打包优化方案可以分为以下几个层面：
按需引入组件库使用 babel-plugin-import 或 Vite 的 unplugin-vue-components，避免一次性打包整个 UI 库。示例：// 只引入用到的组件 import { Button, Table } from 'ant-design-vue'路由懒加载使用 import 动态导入，拆分路由页面。const Home = => import('@/views/Home.vue')第三方库拆分体积特别大的库（如 ECharts、Lodash、Moment.js）使用 按需引入（lodash-es + babel-plugin-lodash）替换为更轻量库（如 dayjs 替代 moment）通过 CDN 引入并配置 externals，不打进 bundle。减少不必要的依赖使用 webpack-bundle-analyzer 分析包体积，删除未用到的库。对小功能模块，尽量自己写，而不是引入大库。开启代码压缩 & Tree ShakingWebpack/Vite 默认支持，会移除无用代码。可以配置 TerserPlugin 去除 console.log、debugger。new TerserPlugin({ terserOptions: { compress: { drop_console: true, drop_debugger: true } } })CSS 优化使用 purgecss / unplugin-vue-components 自动清理未使用的 CSS。开启 cssnano 压缩 CSS。分包策略Webpack：通过 splitChunks 拆分 vendor、common、async。Vite：build.rollupOptions.output.manualChunks 控制代码分块。开启 Gzip / Brotli 压缩使用 compression-webpack-plugin 或 Nginx 配置 gzip。Gzip 后体积一般能减少 60%-70%。图片优化Webpack：image-webpack-loaderVite：vite-plugin-imagemin大图片转为 懒加载 + CDN，小图转为 base64 内联。缓存优化输出文件名加 [contenthash]，确保浏览器缓存生效。将 runtime、vendor 等长期不变的文件单独打包，减少二次访问体积。CDN 加速静态资源（JS、CSS、图片）托管到 CDN。Vue、Vuex、Vue Router 等核心库走 CDN，减少打包体积。HTTP/2 + 浏览器缓存开启 HTTP/2 多路复用，减少请求开销。设置合理的缓存策略（强缓存、协商缓存）。分环境构建开发、测试、生产分开配置，避免引入无用的调试工具。✅ 总结一下：
Vue 打包优化一般流程是 代码层按需引入 + 构建层拆包压缩 + 运行时懒加载 + 运维层缓存/CDN。
来源：做个明媚的女子
