webpack 的 runtime 配置有什么用

前言

在使用 webpack 配置时，经常会遇到一个 optimization.runtimeChunk配置，官方文档对于它也只是怎么配置，没有明确的解释用法。本文就一起探索一下 runtime 的作用，以及其优化作用。

作用

认识 runtime

Webpack 的 runtime 配置 是 Webpack 构建过程中一个重要的部分，主要用于管理和优化模块加载和执行的方式。它涉及如何生成和注入运行时代码，以确保模块之间的依赖关系能够正确解析和执行。

简单一句话就是，runtime 记录了异步模块的 id 和 对应的文件信息，之后可以直接使用文件id来加载文件。

我们来看一下wepback打包完成之后，某个文件中记录的 runtime 信息，key 是文件id，value 是 文件名。

需要注意两点：

1. 只有异步（动态）加载模块才会生成 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);
    });
});

2. 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 => 文件名 的对象提到一个独立的文件中。

到这里需要问几个问题：

1. 这样做有什么好处呢？
2. 既然放在 optimization就是对打包的优化，优化的什么？

这些问题我们继续分析

优化点

避免入口文件变化

• 我们看到runtime维护一个 id 和 文件名的对象。我们在更新代码过程中，这个关系是易变的。所有 runtime 是易变的

• runtime 在入口文件中，导致入口文件也是易变的

• 一个很小的对象导致我们的入口文件变化，用户再重新下载入口文件，是很不划算的

结论就是将 runtime 这个对象关系抽离为一个单独的文件，不影响比的文件，这样文件的变动不影响入口文件，用户二次进去网站可以直接使用缓存。

结语

通过配置 runtime，将部分文件抽离，避免因为小改动影响大文件的变化，提高用户命中缓存的概率，对前端性能是很有帮助的。

为什么命中缓存能提升前端性能，可以查看这个 https://webfem.com/post/performance-network

原文地址：https://webfem.com/post/webpack-runtime，转载请注明出处