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 Shaking
- Webpack/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-loader
- Vite：vite-plugin-imagemin
- 大图片转为 懒加载 + CDN ，小图转为 base64 内联。
缓存优化
- 输出文件名加 [contenthash]，确保浏览器缓存生效。
- 将 runtime、vendor 等长期不变的文件单独打包，减少二次访问体积。

✅ 总结一下：

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