在 vite 中配置动态导入分包，核心做法是在 build.rollupoptions 中通过 manualchunks 函数自定义 chunk 拆分逻辑。该函数接收模块 id 和 getmoduleids 辅助方法，开发者可根据路径特征（如 node_modules）将第三方库提取为独立文件，从而优化浏览器缓存策略。
如何按 node_modules 提取公共依赖？
要实现按 node_modules 提取公共依赖，需在 vite.config.js 中定义 manualChunks 函数。当模块 ID 包含 node_modules 时，返回一个基于包名的固定字符串作为 chunk 名称；否则返回 undefined 让 Rollup 自动处理内部代码。这样可以将 React、Vue 等库打包为独立的 .js 文件。
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0];
}
}
}
}
}
});
如何分离 vendor 与业务代码？
若希望将所有第三方库合并为一个名为 vendor 的 chunk，同时保持业务代码的自动拆分，只需在 manualChunks 中统一返回 'vendor' 给所有 node_modules 路径的模块。这种配置适用于小型项目或需要减少 HTTP 请求数的场景，但会导致 vendor.js 体积较大，更新时需重新下载整个文件。
立即学习“Java免费学习笔记（深入）”；
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
}
});
手动拆分对构建产物有何具体影响？
使用 manualChunks 后，构建产物会从单一的 index.js 拆分为多个文件。例如，上述第一种配置会生成 react.js、lodash.js 等业务入口文件及对应的 chunk 文件。浏览器在首次加载后可长期缓存这些稳定的第三方库文件，仅当业务代码变更时才重新下载对应的 chunk，从而显著提升二次访问速度。
