cacheGroups 是 Webpack splitChunks 中精细化分包的核心机制，用于按规则、优先级、时机和命名对第三方库差异化拆分，确保可预期、可维护、可缓存。
Webpack 的 cacheGroups 是 splitChunks 中最核心的精细化分包机制，尤其适合对第三方库做差异化拆分——比如把 React、Lodash 单独拎出来，把 UI 组件库合并成一个 chunk，再把工具类小库聚合成另一个。关键不在“能不能分”，而在于“按什么规则分、谁先谁后、怎么命名、是否复用”。
明确匹配规则：用 test 精准锁定目标模块
不能只靠 /node_modules/ 一刀切，否则所有依赖都挤进同一个 vendor 包。应逐个定义：
-
React 生态单独抽离：
test: /[\/]node_modules[\/](react|react-dom|react-router|@remix-run[\/]) -
Lodash 单独成块（体积大、使用频次高）：
test: /[\/]node_modules[\/](lodash|lodash-es)/ -
UI 库聚合（如 Element Plus + dayjs）：
test: /[\/]node_modules[\/](element-plus|dayjs)/ -
避免误匹配：正则末尾加
$或用include辅助限定路径，防止子依赖被重复捕获
控制优先级与执行顺序：priority 决定归属权
一个模块（比如 lodash-es）可能同时匹配多个 cacheGroup。Webpack 按 priority 数值从高到低判断归属，高优组先抢，低优组跳过：
- React 组设
priority: 20 - Lodash 组设
priority: 15 - UI 库组设
priority: 10 - 兜底 vendors 组保留
priority: -10，只收没被前面抓走的依赖
指定打包时机与复用逻辑：chunks 和 reuseExistingChunk 要配对用
chunks 决定哪些加载方式的模块参与该组拆分：
立即学习“Java免费学习笔记（深入）”；
-
chunks: 'initial'→ 只处理同步引入（如import React from 'react'） -
chunks: 'async'→ 只处理动态导入（如import('./utils')） -
chunks: 'all'→ 全部覆盖（推荐，确保一致性）
搭配 reuseExistingChunk: true，可避免同一模块在多个异步 chunk 中重复打包。例如 dayjs 已在 UI 组中生成了 ui-vendors.js，后续路由里再 import('dayjs') 就直接复用，不再新建 chunk。
命名、大小与强制提取：name / minSize / enforce 的协同
让输出可控、可读、不遗漏：
-
name: 'react-vendors'→ 输出文件名清晰，利于 CDN 缓存策略和调试 -
minSize: 0→ 第三方库通常已足够大，但设为 0 可确保哪怕单个模块（如轻量 polyfill）也严格按规则归组 -
enforce: true→ 强制拆分，绕过minChunks次数限制（第三方库往往只被引用一次，但必须独立） - 慎用
maxSize：对第三方库一般不设上限，除非刻意做“大库切片”（如把 antd 拆成antd-ui和antd-icons）
配置不是堆参数，而是建立规则链：匹配 → 排序 → 切入时机 → 命名复用。理清这四步，第三方库拆分就不再是“能跑就行”，而是可预期、可维护、可缓存的工程实践。
