webpack 的 runtime 配置有什么用
前言
在使用 webpack 配置时，经常会遇到一个 optimization.runtimeChunk配置，官方文档对于它也只是怎么配置，没有明确的解释用法。本文就一起探索一下 runtime 的作用，以及其优化作用。
作用
认识 runtime
Webpack 的 runtime 配置 是 Webpack 构建过程中一个重要的部分，主要用于管理和优化模块加载和执行的方式。它涉及如何生成和注入运行时代码，以确保模块之间的依赖关系能够正确解析和执行。
简单一句话就是，runtime 记录了异步模块的 id 和 对应的文件信息，之后可以直接使用文件id来加载文件。
我们来看一下wepback打包完成之后，某个文件中记录的 runtime 信息，key 是文件id，value 是 文件名。
需要注意两点：
- 只有异步（动态）加载模块才会生成 runtime，同步模块不生成 runtime
异步加载，包括我们拆分的异步路由，异步模块
// 异步路由，以 vue-router 为例
{
name: 'records',
path: '/records',
component: () => import('../views/records/index.vue'),
}
// 动态加载一个模块
button.addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default(); // 调用模块的默认导出
})
.catch(err => {
console.error('模块加载失败', err);
});
});
- runtime 记录的信息会保存到入口文件中
配置
使用 optimization.runtimeChunk 开启 runtime 配置
// 使用 字符串 single 开启
module.exports = {
optimization: {
runtimeChunk: 'single', // 提取 runtime 到单独的文件
},
};
// 或者通过对象配置
module.exports = {
optimization: {
runtimeChunk: {
name: 'runtime', // 提取 runtime 到单独的文件
}
},
};效果
rutime 配置之后，会将刚才截图看到的那部分代码，也就是id和文件的对应关系，单独打包到一个文件中去，生成一个几kb的文件。
这时使用 runtime 之后，生成的文件
开启 runtime 之后，可以发现入口 index.html 会增加一个对runtime的引用。
至此，我们可以总结一下， runtime 的作用就是把一个 id => 文件名 的对象提到一个独立的文件中。
到这里需要问几个问题：
- 这样做有什么好处呢？
- 既然放在
optimization就是对打包的优化，优化的什么？
这些问题我们继续分析
优化点
避免入口文件变化
我们看到runtime维护一个 id 和 文件名的对象。我们在更新代码过程中，这个关系是易变的。所有 runtime 是易变的
runtime 在入口文件中，导致入口文件也是易变的
一个很小的对象导致我们的入口文件变化，用户再重新下载入口文件，是很不划算的
结论就是将 runtime 这个对象关系抽离为一个单独的文件，不影响比的文件，这样文件的变动不影响入口文件，用户二次进去网站可以直接使用缓存。
结语
通过配置 runtime，将部分文件抽离，避免因为小改动影响大文件的变化，提高用户命中缓存的概率，对前端性能是很有帮助的。
为什么命中缓存能提升前端性能，可以查看这个 https://webfem.com/post/performance-network
原文地址：https://webfem.com/post/webpack-runtime，转载请注明出处
