vite打包优化有哪些

好问题 👍

在 Vite 项目打包优化 时，主要关注 构建速度 和 产物体积 两个方向。下面我给你系统梳理一下常用优化手段：

---

一、构建速度优化

1. 使用 esbuild 加速

• Vite 内部默认用 esbuild 来做依赖预构建，速度比传统 webpack 快很多。
• 可以在 vite.config.js 配置 optimizeDeps：

export default {
  optimizeDeps: {
    include: ['axios', 'lodash-es'], // 预构建依赖，避免每次冷启动慢
  }
}

2. 缓存依赖

• 启动时会在 node_modules/.vite 生成缓存文件，下次启动直接用缓存。
• CI/CD 可以利用 pnpm install --frozen-lockfile && pnpm build 并缓存 .vite 和 node_modules。

3. 按需引入

• UI 库（Ant Design Vue / Element Plus）不要全量引入，要用 unplugin-vue-components、unplugin-auto-import 自动导入，减少打包体积。

---

二、产物体积优化

1. 代码分包（分模块打包）

• Vite 使用 rollup 打包，可以通过 build.rollupOptions.output.manualChunks 拆分依赖：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          echarts: ['echarts'],
          lodash: ['lodash-es']
        }
      }
    }
  }
}

这样能让依赖分开缓存，避免用户每次都下载大包。

2. 压缩代码

• 默认使用 esbuild 压缩，速度快。
• 如果需要更高压缩率，可改用 terser：

export default {
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      }
    }
  }
}

3. 资源压缩（gzip / brotli）

• 使用 vite-plugin-compression：

import viteCompression from 'vite-plugin-compression'

export default {
  plugins: [
    viteCompression({ algorithm: 'gzip' }), // 或 brotli
  ]
}

在服务器端开启 gzip/brotli 响应，能大幅减少传输体积。

4. 图片优化

• 小图片用 base64 内联，大图片用 vite-imagetools 或 image-webpack-loader 压缩。
• SVG 建议用 vite-plugin-svgr 转 React/Vue 组件，避免重复加载。

5. Tree-shaking & 摇树优化

• 避免 import * as _ from 'lodash'，用 import { debounce } from 'lodash-es'。
• 选择 -es 版本库，天然支持 tree-shaking。

6. CDN 加速（external 依赖）

• 把大依赖走 CDN，不打包进产物，减少构建时间和包大小：

export default {
  build: {
    rollupOptions: {
      external: ['vue', 'echarts'],
      output: {
        globals: {
          vue: 'Vue',
          echarts: 'echarts'
        }
      }
    }
  }
}

---

三、运行时优化

1. 路由懒加载

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

2. 组件按需加载

• 表格、图表等大组件用 import() 异步加载。

3. SSR / SSG

• 如果是内容型网站，考虑用 Vite SSR 或 Nuxt，减少首屏白屏时间。

---

四、分析与调试

1. 打包分析工具

npm install rollup-plugin-visualizer -D

import { visualizer } from 'rollup-plugin-visualizer'

export default {
  plugins: [visualizer({ open: true })]
}

能看到每个依赖占用体积。

---

✅ 总结一下：

• 开发阶段快 → optimizeDeps、缓存、按需加载
• 打包产物小 → manualChunks 分包、gzip/brotli 压缩、图片优化、CDN external
• 运行时快 → 路由懒加载、组件异步加载

---