首页

Appearance

optimization.runtimeChunk 属性的含义 ​

optimization.runtimeChunk 是 Webpack 提供的优化选项之一，用于将运行时代码（runtime）从入口文件中提取出来，生成单独的 chunk 文件。

运行时代码包括 Webpack 用来管理模块加载和模块依赖的逻辑，例如：

  • 模块加载的映射关系。
  • 动态加载模块的代码。
  • 模块热更新逻辑（如果启用 HMR）。

问：为什么需要提取运行时代码？ ​

1: 缓存优化：

  • 当入口文件的内容发生变化时，如果运行时代码和业务代码混合在一起，整个文件会失效，浏览器缓存无法有效利用。
  • 提取运行时代码后，业务代码和运行时代码分离，只有业务代码变更时，浏览器需要重新加载相关文件。

2:提升加载效率：

  • 单独的运行时代码文件通常较小且变化较少，可以被长时间缓存。
  • 运行时代码独立后，能更快地启动模块加载逻辑。

使用方法和配置选项 ​

在 Webpack 配置中，通过 optimization.runtimeChunk 启用或配置该功能。

1. 简单启用（设为 true）

javascript
module.exports = {
  optimization: {
    runtimeChunk: true,
  },
};

效果：提取运行时代码为单独的 runtime~[entrypoint].js 文件。例如，如果入口是 main，生成的运行时文件可能命名为 runtime~main.js。

2. 使用对象配置

更细粒度的控制，可以传递对象进行配置：

javascript
module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'runtime', // 自定义运行时代码文件名
    },
  },
};

效果：生成的运行时文件将始终命名为 runtime.js，而不是基于入口动态命名。

完整示例

javascript
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  optimization: {
    runtimeChunk: {
      name: 'runtime', // 单独提取 runtime 文件
    },
    splitChunks: {
      chunks: 'all', // 将 node_modules 分离为 vendor 文件
    },
  },
};

效果：

  • 提取运行时文件 runtime.js。
  • 业务逻辑文件（如 main.[hash].js）和第三方库文件（如 vendors~main.[hash].js）分离。

启用 runtimeChunk 的优缺点

优点 ​

  • 缓存友好： 文件更少变动，长期缓存稳定。

  • 代码分离： 运行时和业务代码解耦，文件更清晰。

  • 性能优化： 运行时代码文件通常很小，可以快速加载。

缺点 ​

  • 额外的 HTTP 请求： 会新增一个运行时文件的请求，需考虑对性能的影响。 通过 HTTP/2 或 CDN 可以缓解多请求问题。

常见问题 ​

  1. 为什么文件名中有 runtime~ 前缀？ Webpack 默认根据入口名称生成运行时代码文件名。如果入口是 main，则运行时文件名是 runtime~main.js。

  2. runtimeChunk 与 splitChunks 的关系？ runtimeChunk：专注于提取 Webpack 的运行时代码。 splitChunks：专注于提取公共模块代码（如第三方库或业务中共享的代码）。 两者可以结合使用，提升打包和加载效率。