manualChunks 能提升缓存效率，因其将稳定依赖（如 Vue、Element Plus、lodash-es）与易变业务代码分离打包，使依赖文件哈希长期不变，浏览器可强缓存；修改业务代码仅更新 index.js，避免全量重载。
在 Vite 生产构建中配置 manualChunks，核心目标是把稳定不变的代码（如框架、UI 库、工具函数）和频繁变动的业务代码分开打包，让浏览器能长期缓存第三方依赖，只更新真正变化的部分。
为什么 manualChunks 能提升缓存效率
默认情况下，Vite 会把所有代码（含 Vue、lodash、路由、业务组件）打包进一个或少数几个文件。只要改一行业务逻辑，整个 JS 文件哈希值就变，浏览器无法复用旧缓存，必须重新下载全部内容。
启用 manualChunks 后，你可以明确指定：
- vue、vue-router、pinia → 打进
framework.js - element-plus、@icon-park/vue → 打进
ui.js - lodash-es、dayjs、zod → 打进
utils.js - 其余业务代码 → 留在
index.js或按路由自动分块
这样，只要不升级 UI 库或工具包，ui.js 和 utils.js 的文件名哈希就不会变，用户二次访问直接命中强缓存。
立即学习“Java免费学习笔记（深入）”；
基础对象式配置（推荐初用）
在 vite.config.ts 中写入：
build: {
rollupOptions: {
output: {
manualChunks: {
framework: ['vue', 'vue-router', 'pinia'],
ui: ['element-plus', '@icon-park/vue'],
utils: ['lodash-es', 'dayjs', 'zod']
}
}
}
}
这种写法清晰直观，每个 key 是 chunk 名，value 是入口模块列表（及其所有依赖）。Vite 会自动把它们及其子依赖提取到对应 chunk 中。
进阶函数式配置（适配复杂场景）
当需要按路径、环境或稳定性做更细粒度控制时，用函数方式：
manualChunks(id) {
if (id.includes('node_modules')) {
if (id.includes('vue') || id.includes('pinia')) return 'framework'
if (id.includes('element-plus') || id.includes('@icon-park')) return 'ui'
if (id.includes('lodash-es') || id.includes('dayjs')) return 'utils'
}
if (id.includes('/src/views/') || id.includes('/src/pages/')) {
return 'pages'
}
}
注意：函数返回字符串即为 chunk 名；返回 undefined 则走默认分块逻辑。适合配合动态导入（defineAsyncComponent 或 import()）做路由级拆分。
配套命名与验证要点
光分块还不够，要确保输出文件名稳定可识别：
- 用
output.chunkFileNames: 'assets/[name]-[hash].js'让 chunk 名出现在文件名中 - 构建后检查
dist/assets/目录，确认是否生成了framework-xxx.js、ui-xxx.js等独立文件 - 打开浏览器 DevTools → Network → 刷新页面，观察各 JS 文件的
Size和Cache-Control响应头 - 修改一个 .vue 组件再打包，对比前后
framework-*.js的哈希是否一致
只要哈希不变，就说明缓存策略已生效。
