webpack 中用 splitchunks 优化长期缓存的核心是分离稳定第三方库与频繁变动的业务代码，通过 runtimechunk: 'single'、splitchunks.chunks: 'all'、cachegroups 提取 vendors、output 使用 contenthash 实现精准缓存。
在 Webpack 中用 splitChunks 优化长期缓存，核心是把稳定不变的代码（比如第三方库）和频繁变动的业务代码彻底分开，让浏览器能长期复用 vendor、runtime 等 chunk，避免一次小改动就让所有 JS 全部失效重下。
明确 chunks 类型与缓存影响
Webpack 中有三类关键 chunk，它们对缓存效果起决定作用：
- initial chunks：由 entry 直接引入的代码，含业务逻辑，变动频繁，不宜过大
-
async chunks：通过
import()动态加载的代码，适合按路由/功能拆分，提升首屏加载速度 - runtime chunks：包含 webpack 模块加载器、模块缓存等运行时逻辑，极小但极易因配置或入口变化而改变 —— 必须单独提取，否则会污染所有 initial chunk 的 hash
必须启用 runtimeChunk: 'single'
不提取 runtime，它的代码会混入每个 initial chunk，哪怕只改一行业务代码，所有 chunk 的 hash 都会变，缓存全部失效。
正确写法：
optimization: {
runtimeChunk: 'single'
}
⚠️ 注意：这个配置必须搭配 splitChunks.chunks: 'all' 才有效。如果只设 'async'（默认值），runtime 可能仍留在 initial chunk 里，起不到隔离作用。
合理配置 splitChunks 提取稳定依赖
目标是把 node_modules 中的第三方库统一打包进 vendors chunk，并确保它有独立且稳定的 hash。
推荐基础配置：
splitChunks: {
chunks: 'all',
minSize: 20000,
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
priority: 10,
reuseExistingChunk: true
}
}
}
-
chunks: 'all'：同时处理 initial 和 async chunk，确保 vendor 被所有类型引用时都能复用 -
priority：数值越大优先级越高，防止被其他 cacheGroup 覆盖 -
reuseExistingChunk: true：如果某模块已在某个 chunk 中存在，就不再重复打包
配合 contenthash 实现精准缓存
仅靠拆包还不够，输出文件名必须使用 [contenthash] 而非 [hash] 或 [chunkhash]：
output: {
filename: '[name].[contenthash:8].js'
}
这样，只有当文件内容真正改变时，hash 才会更新；vendor.js 不变，它的文件名就不变，浏览器就能长久复用缓存。
额外建议：给提取出的 vendors 和 runtime chunk 设置固定名称（如 vendors.[contenthash].js），并在 HTML 中用 html-webpack-plugin 自动注入，避免手动维护 script 标签。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
