合理配置 manualChunks 的核心是让不同类别的代码“各归其位”：框架和基础依赖稳定复用、业务模块按需隔离、第三方库按功能域分组，最终实现缓存命中率高、更新影响范围小。
合理配置 manualChunks 的核心是让不同类别的代码“各归其位”：框架和基础依赖稳定复用、业务模块按需隔离、第三方库按功能域分组，最终实现缓存命中率高、更新影响范围小。
按稳定性分层：基础依赖单独提取
Vue/React、Router、Pinia、Axios 等底层运行时和状态管理库极少变更，应统一抽成 shared 或 core-vendor。这样哪怕某个页面逻辑更新，这部分 chunk 的 hash 也不会变，浏览器可长期复用缓存。
- 避免把
vue和lodash-es打进同一个 vendor，它们的发布节奏和使用范围完全不同 - 若已通过 CDN 外部化（如
build.rollupOptions.external = ['vue']），manualChunks 中必须排除，否则会重复打包
按功能域分组：第三方库不堆砌成一个大 vendor
全项目共用一个 vendor.js 看似简单，但会导致“牵一发而动全身”。首页用了 ECharts，后台页用了 Ant Design Pro，两者本无交集，却因共用 vendor 而互相污染缓存。
- 首页图表相关 →
home-vendor: ['echarts', 'echarts-for-react', 'zrender'] - 管理后台组件 →
admin-vendor: ['ant-design-vue', '@ant-design/icons-vue'] - 富文本编辑 →
editor-vendor: ['tiptap', '@tiptap/starter-kit']
按入口路径隔离：多页应用防 chunk 污染
多 HTML 入口（如 src/pages/home/index.html 和 src/pages/admin/index.html）下，manualChunks 若只判断 node_modules，容易把所有依赖都打进每个页面的 chunk，造成体积膨胀和缓存失效。
- 用
id.includes('src/pages/home/')匹配首页专属业务模块，返回'home-logic' - 用
id.includes('src/pages/admin/')匹配后台页逻辑，返回'admin-logic' - 公共工具函数（如
src/utils/request.ts）可单独设为'shared-utils'，被多个入口复用
按目录结构收敛：内部模块归类清晰
业务代码中，/components/、/hooks/、/stores/ 这些高频复用目录，适合聚合成独立 chunk，既利于缓存，也方便分析加载链路。
if (id.includes('/components/')) return 'components'if (id.includes('/hooks/')) return 'hooks'if (id.includes('/stores/')) return 'stores'- 注意路径匹配用绝对路径（Vite 传入的是完整文件路径），建议加
/边界避免误匹配（如/utils/不匹配/utils2/）
