vite的分包
在 Vite 项目中，打包时的分包策略主要通过配置 build.rollupOptions.output 来控制，核心包括以下几个维度：
一、默认分包规则
Vite 基于 Rollup 打包，默认分包逻辑如下：
1. 依赖与业务代码分离
- 第三方依赖（如 node_modules 中的库）会被自动拆分为独立 chunk（如 vendor.js ），避免与业务代码混合。
- 原因：依赖更新频率低，单独打包可利用浏览器缓存。
2. 路由或组件懒加载分包
- 对 import('./module.js') 动态导入的模块，会自动生成独立 chunk（如 module.[hash].js ）。
二、手动配置分包维度
通过 vite.config.js 中的 build.rollupOptions.output 可自定义分包策略，常用配置如下：
1. 按文件类型或路径分包
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
// 按文件夹分组（如将 utils 目录下的文件打包到 utils 文件夹）
manualChunks(id) {
if (id.includes('node_modules')) {
// 第三方依赖按包名分包（如 react、vue 单独打包）
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
if (id.includes('/utils/')) {
return 'utils';
}
if (id.includes('/components/')) {
return 'components';
}
// 其他业务代码按默认规则处理
}
}
}
}
}
2. 控制 chunk 大小阈值
- chunkFileNames ：定义 chunk 文件名格式，可结合哈希值区分版本。
- manualChunks 配合 maxFileSize （Vite 2.7+ 支持）：
export default {
build: {
rollupOptions: {
output: {
// 单个 chunk 超过 500KB 时自动拆分
chunkFileNames: 'assets/chunks/[name]-[hash].js',
manualChunks: {
// 示例：将 lodash 单独打包
lodash: ['lodash']
},
// Vite 4 中使用 `chunkSizeWarningLimit` 控制警告阈值
chunkSizeWarningLimit: 500
}
}
}
}
3. 缓存分组（长期缓存优化）
- 将更新频率低的代码（如框架、工具库）与高频更新的业务代码分离：
manualChunks: {
// 第三方库单独分组
vendor: ['react', 'react-dom'],
// 工具函数分组
utils: ['@/utils/request', '@/utils/format'],
// 业务页面按模块分组（如 dashboard 页面相关代码）
dashboard: ['@/pages/dashboard/index']
}
三、分包效果验证
打包后可通过以下方式查看分包结果：
1. 在 dist 目录中查看生成的 JS 文件，按命名规则判断分组是否符合预期。
2. 使用 rollup-plugin-analyzer 或 vite-plugin-bundle-analyzer 分析包体积分布：
# 安装分析插件
npm install -D rollup-plugin-analyzer
// vite.config.js
import { defineConfig } from 'vite'
import analyzer from 'rollup-plugin-analyzer'
export default {
build: {
rollupOptions: {
plugins: [analyzer()] // 打包后生成分析报告
}
}
}
四、最佳实践
- 按需分包：优先拆分高频访问或体积大的模块，避免过度拆分导致请求数过多。
- 结合路由懒加载：对单页应用的路由组件使用 import() 动态导入，自动生成独立 chunk。
- 关注网络性能：单个 chunk 建议控制在 200KB 以内（移动端可更低），减少首屏加载时间。
通过以上配置，可灵活控制 Vite 打包时的分包粒度，平衡加载速度与缓存效率。