Webpack抽离第三方库和静态资源核心靠SplitChunksPlugin，默认内置；需明确分离目标（第三方库vs公共业务代码），通过cacheGroups配置vendor组（priority:10）和common组（minChunks:2），并配合runtimeChunk和contenthash实现最优缓存。
Webpack 中抽离第三方库和静态资源，核心靠 SplitChunksPlugin 配置，它默认内置，无需额外安装。关键不是堆参数，而是理清两件事：谁该被单独打包（第三方库？公共业务代码？CSS？）、谁先打包（优先级决定归属）。
明确分离目标：第三方库 vs 公共业务代码
第三方库（如 Vue、Lodash、Axios）通常稳定、体积大、不常变更；公共业务代码（如 utils、components、hooks）是自己写的、复用多次的逻辑。二者应分开打包，便于长期缓存和按需加载。
- 第三方库匹配规则一般写成
/[\/]node_modules[\/]/，确保只抓取依赖包 - 公共业务代码建议限定在
src/目录下，例如/[\/]src[\/](utils|components|hooks)[\/]/，避免误伤配置或测试文件 - 如果项目有多个入口（如 index、admin），抽离后的 chunk 可被多个 HTML 共享，减少重复加载
基础 splitChunks 配置结构
重点放在 cacheGroups —— 它是真正做“分组抽离”的地方。每个 group 可独立设置匹配条件、名称、优先级和复用策略：
-
vendor 组：专用于第三方库，
priority: 10确保它比其他组更早匹配 -
common 组：用于业务中被引用 ≥2 次的模块，
minChunks: 2是合理起点 - chunks: 'all' 必须显式设置，否则默认只处理异步 chunk，会漏掉同步引入的库
-
reuseExistingChunk: true避免同一份代码被打包进多个 chunk，节省体积
静态资源（CSS、字体等）是否需要抽离？
CSS 本身不通过 splitChunks 处理，而是靠 mini-css-extract-plugin 提取为独立 .css 文件。但它的输出可配合 splitChunks 的缓存机制：
- 启用
MiniCssExtractPlugin后，CSS 会生成单独文件，自动带 contenthash，天然支持强缓存 - 若 CSS 中引用了字体、图片等静态资源，它们会随 file-loader 或 url-loader 打包进对应目录，无需 splitChunks 干预
- 真正要“抽离”的静态资源，是指 JS 中动态 import 的模块（如
import('./module')），这类异步代码会被 splitChunks 自动识别并拆包
配套优化：runtime 和 HTML 引入
抽离后，还需两处配合才能发挥最大缓存效果：
-
runtimeChunk: { name: 'runtime' }—— 把 webpack 运行时逻辑单独拎出，避免 vendor 或业务代码变动导致 runtime 缓存失效 - 用
HtmlWebpackPlugin的chunks字段精确控制每个 HTML 加载哪些 chunk，比如chunks: ['runtime', 'vendor', 'index'] - 输出文件名加上
[contenthash]，如js/[name].[contenthash].js，确保内容不变则 URL 不变
