Vite分块优化配置

核心问题 #

Vite 默认将所有第三方库打包成单个 vendor.js，导致：

首屏加载 2MB+ 巨型文件
任何依赖更新都导致整体缓存失效
浏览器并行下载能力无法利用

解决方案：manualChunks #

配置示例 #

// vite.config.ts
export default defineConfig({
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          ui: ['radix-vue', 'lucide-vue-next'],
          charts: ['echarts', '@unovis/vue', '@unovis/ts'],
          utils: ['axios', 'clsx', 'dayjs', 'lodash-es']
        }
      }
    }
  }
})

分组策略 #

分组	包含内容	更新频率	加载策略
vue	Vue全家桶	几乎不变	首屏必需
ui	UI组件库	偶尔更新	首屏必需
charts	图表库	稳定	按需加载
utils	工具函数	可能更新	首屏必需

实测效果对比 #

打包产出物变化 #

优化前（默认配置）

# 主要文件
index-euaACXze.js:   1,240KB (411KB gzip)  # 所有第三方库打包在一起
index-DkzwQ_MR.js:     308KB (100KB gzip)  # 业务代码
vee-validate-zod.js:   95KB (34KB gzip)
index-DSKv6ffS.js:      57KB (14KB gzip)
index-DfccCYYb.js:      56KB (15KB gzip)

# 问题：所有第三方库在一个巨型文件中
总计: 511KB gzip 必须全部下载才能看到首屏

优化后（manualChunks）

# 独立分块的第三方库
charts-DXTdFTDY.js: 1,225KB (406KB gzip)  # 图表库 - 可延迟加载
ui-Bqr4ge8K.js:       182KB (52KB gzip)   # UI组件库
vue-CIx5ighn.js:       97KB (38KB gzip)   # Vue核心
utils-CMm3-BQj.js:     65KB (24KB gzip)   # 工具库
vee-validate-zod.js:   95KB (34KB gzip)   # 表单验证

# 业务代码保持独立
index-DSKv6ffS.js:     57KB (14KB gzip)
index-BZkTNyft.js:     56KB (15KB gzip)
index-GPjWQ8xp.js:     45KB (15KB gzip)

# 首屏必需: 114KB (vue + ui + utils)
# 图表功能: 406KB (延迟加载)

性能提升 #

首屏加载: 511KB → 114KB（减少77.7%）
缓存效率: 更新单个库只需重新下载对应chunk
并行下载: 浏览器可同时下载多个chunk

最佳实践 #

按更新频率分组: 稳定的库放一起，频繁更新的独立
控制chunk大小: 单个chunk不超过500KB
首屏优先: 核心功能立即加载，增强功能延迟加载
监控效果: 使用构建分析工具验证优化效果

总结 #

manualChunks 的本质是空间换时间：

多个小文件替代单个大文件
并行下载替代串行等待
细粒度缓存替代整体失效

这是前端性能优化的关键策略之一。