在 vite 项目中实现代码分割，核心是配置 rollupoptions.output.manualchunks 函数。该函数接收模块 id 和 getmoduleinfo 方法，通过判断模块路径（如 /node_modules/）或依赖名称，将其分配到独立的 chunk 文件中。这样可以将第三方库与业务代码分离，利用浏览器缓存提升加载性能。
如何配置 manualChunks 拆分第三方库？
通过在 vite.config.js 中定义 manualChunks 函数，可以精确控制哪些模块进入独立文件。例如，将所有 /node_modules/ 下的包合并为一个 vendor.js，或者按包名拆分。这能确保不常变动的库被单独缓存。
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor';
}
}
}
}
}
}
运行构建后，所有第三方依赖会被打包进 vendor.[hash].js，而业务代码则进入 index.[hash].js。这种结构使得当仅修改业务逻辑时，浏览器无需重新下载庞大的第三方库。
立即学习“Java免费学习笔记（深入）”；
如何按功能模块进行更细粒度的拆分？
除了拆分第三方库，还可以根据业务模块的层级关系进行拆分。例如，将路由相关的组件或大型工具库提取为单独的 chunk。这通常通过检查模块 ID 的路径或使用 getModuleInfo 获取依赖树来实现。
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
manualChunks(id, { getModuleInfo }) {
if (id.includes('node_modules')) {
return 'vendor';
}
// 假设有一个大型工具库 utils
if (id.includes('/utils/')) {
return 'utils';
}
}
}
}
}
}
构建后，/utils/ 目录下的代码会生成 utils.[hash].js。这种细粒度拆分有助于减少首屏加载体积，特别是当某些模块仅在特定路由下使用时。
manualChunks 返回 null 时的行为是什么？
当 manualChunks 函数对某个模块返回 null 或未定义时，Rollup 会应用默认的代码分割策略。默认情况下，Vite/Rollup 会将入口点之外的模块视为动态导入或按需加载的 chunk，或者将它们合并到最近的父 chunk 中。这意味着未显式指定的模块不会强制进入 vendor，而是保持其原有的分割逻辑，通常业务代码会根据入口文件自动分割。
