在 Webpack 里，要把长期缓存真正做好，关键思路其实很明确：把相对稳定的第三方库，和经常改动的业务代码拆开处理。

具体做法通常包括配合 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 标签。

《夸克》非常好用的免费AI浏览器

下载APP查看