vue打包优化方案都有哪些？

Vue 项目在开发模式下没什么性能问题，但打包上线后如果没有优化，可能会遇到 首屏加载慢、包体积过大、交互卡顿 等情况。常见的 Vue 打包优化方案可以分为以下几个层面：

---

一、代码层优化

1. 按需引入组件库

   • 使用 babel-plugin-import 或 Vite 的 unplugin-vue-components，避免一次性打包整个 UI 库。

   • 示例：

     // 只引入用到的组件
     import { Button, Table } from 'ant-design-vue'
     

2. 路由懒加载

   • 使用 import() 动态导入，拆分路由页面。

     const Home = () => import('@/views/Home.vue')
     

3. 第三方库拆分

   • 体积特别大的库（如 ECharts、Lodash、Moment.js）

     • 使用 按需引入（lodash-es + babel-plugin-lodash）

     • 替换为更轻量库（如 dayjs 替代 moment）

     • 通过 CDN 引入并配置 externals，不打进 bundle。

4. 减少不必要的依赖

   • 使用 webpack-bundle-analyzer 分析包体积，删除未用到的库。

   • 对小功能模块，尽量自己写，而不是引入大库。

---

二、构建层优化

1. 开启代码压缩 & Tree Shaking

   • Webpack/Vite 默认支持，会移除无用代码。

   • 可以配置 TerserPlugin 去除 console.log、debugger。

     new TerserPlugin({terserOptions: { compress: { drop_console: true, drop_debugger: true } }
     })
     

2. CSS 优化

   • 使用 purgecss / unplugin-vue-components 自动清理未使用的 CSS。

   • 开启 cssnano 压缩 CSS。

3. 分包策略

   • Webpack：通过 splitChunks 拆分 vendor、common、async。

   • Vite：build.rollupOptions.output.manualChunks 控制代码分块。

4. 开启 Gzip / Brotli 压缩

   • 使用 compression-webpack-plugin 或 Nginx 配置 gzip。

   • Gzip 后体积一般能减少 60%-70%。

5. 图片优化

   • Webpack：image-webpack-loader

   • Vite：vite-plugin-imagemin

   • 大图片转为 懒加载 + CDN，小图转为 base64 内联。

6. 缓存优化

   • 输出文件名加 [contenthash]，确保浏览器缓存生效。

   • 将 runtime、vendor 等长期不变的文件单独打包，减少二次访问体积。

---

三、运行时优化

1. 首屏加载优化

   • 路由懒加载 + 骨架屏 / Loading 占位。

   • 静态资源使用 CDN 加速。

2. 懒加载优化

   • 组件懒加载、图片懒加载（vue-lazyload）。

3. 服务端渲染 SSR / 预渲染 Prerender

   • SSR（Nuxt.js）或使用 prerender-spa-plugin，减少首屏白屏。

4. 虚拟滚动、大数据优化

   • 表格、长列表使用 vue-virtual-scroller 或手写虚拟滚动。

   • 避免大数据一次性渲染。

---

四、运维层优化

1. CDN 加速

   • 静态资源（JS、CSS、图片）托管到 CDN。

   • Vue、Vuex、Vue Router 等核心库走 CDN，减少打包体积。

2. HTTP/2 + 浏览器缓存

   • 开启 HTTP/2 多路复用，减少请求开销。

   • 设置合理的缓存策略（强缓存、协商缓存）。

3. 分环境构建

   • 开发、测试、生产分开配置，避免引入无用的调试工具。

---

✅ 总结一下：
Vue 打包优化一般流程是 代码层按需引入 + 构建层拆包压缩 + 运行时懒加载 + 运维层缓存/CDN。

---