runtimeChunk

2024年11月21日

柏拉文

越努力，越幸运

一、认识

---

optimization.runtimeChunk 主要对 webpack 的的一些内置代码进行额外的配置。webpack 在构建完成之后，会生成一些内置代码，比如 __webpack_require__、__webpack_require__.a-z。那这些代码的抽取可以通过 optimization.runtimeChunk 进行配置， 可以将这些代码分离出去，减少打包文件的体积。

二、语法

---

2.1 optimization.runtimeChunk=single

optimization.runtimeChunk: single 会创建一个在所有生成 chunk 之间共享的运行时文件。

single 模式下使用默认名称

optimization: {
  runtimeChunk: "single"
}

single 模式下使用自定义名称

optimization: {
  runtimeChunk: {
    name: "runtime"
  }
}

2.2 optimization.runtimeChunk=multiple

optimization.runtimeChunk=multiple 会为每个入口添加一个只含有 runtime 的额外 chunk。

multiple 模式下使用默认名称

optimization: {
  runtimeChunk: "multiple" // 或者 runtimeChunk: true
}

multiple 模式下使用自定义名称

optimization: {
  runtimeChunk: {
    name: (entrypoint) => `runtime~${entrypoint.name}`,
  },
}