启用 runtimechunk 可将 webpack 运行时逻辑抽离为独立文件，提升缓存命中率；推荐设为 'single'，配合 splitchunks.chunks: 'all'，并设置 contenthash 与合理 cache-control 头。
直接在 optimization 配置项中启用 runtimeChunk 即可，无需额外插件或复杂条件判断。它的核心作用是把 webpack 的运行时逻辑（模块加载器、模块注册表、依赖映射等）从业务代码或 vendor 块中抽离出来，形成独立文件。这样当业务代码变更导致 hash 改变时，运行时文件的 hash 不受影响，浏览器可复用缓存，提升长期缓存命中率。
runtimeChunk 的三种取值及适用场景
boolean 值：
-
true：为每个入口生成一个独立的 runtime 文件（如main.runtime.js、admin.runtime.js），适合多入口且 runtime 逻辑差异大的项目，但会增加请求数； -
false（默认）：不提取，runtime 直接内联到每个 chunk 中，缓存易失效；
-
'single'：整个项目共用一个 runtime 文件（如runtime.js），最常用，兼顾缓存收益与请求数控制； -
'multiple'：按 chunk 类型分组提取（已废弃，仅兼容旧配置，不推荐）；
生产环境典型配置写法
在 webpack.config.js 的 mode: 'production' 下添加：
module.exports = {
mode: 'production',
optimization: {
runtimeChunk: 'single', // ✅ 关键配置
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
priority: 10,
reuseExistingChunk: true
}
}
}
}
};
注意：runtimeChunk: 'single' 必须配合 splitChunks.chunks: 'all' 才能确保 runtime 被正确提取并被所有 chunk 引用；若只设 'async'（默认），runtime 可能仍混入 initial chunk。
验证是否生效
构建后检查 dist 目录：
- 应出现单独的
runtime.xxx.js文件（名称含 hash）； - 其他 bundle（如
main.xxx.js、vendors.xxx.js）不再包含webpackJsonp、__webpack_require__等运行时函数； - HTML 中 script 标签顺序应为：
runtime.js→vendors.js→main.js（顺序错误会导致运行时报错）；
配套缓存策略建议
仅分离 runtime 不够，需配合服务端缓存头才能发挥效果：
-
runtime.js：设置Cache-Control: public, max-age=31536000（1年），因其极稳定； -
vendors.js：设max-age=31536000，第三方库更新频率低； -
main.js：设max-age=3600或更短，业务逻辑变动频繁； - 确保 webpack 使用
contenthash（非hash或chunkhash）生成文件名，避免误失效。
