告别 CommonsChunkPlugin，拥抱 optimization.splitChunks 和 optimization.runtimeChunk

2023-09-08 08:26:34







## 前言

在Webpack 4中，CommonsChunkPlugin已被废弃，取而代之的是两个新的配置选项：optimization.splitChunks和optimization.runtimeChunk。这两个选项可以实现与CommonsChunkPlugin类似的功能，但更加灵活和可控。

## optimization.splitChunks

optimization.splitChunks选项用于配置代码分割策略。它可以根据各种因素（如模块大小、模块依赖关系等）将代码分割成多个块，从而减少主包的大小并提高加载速度。

optimization.splitChunks选项的详细用法请参考Webpack官方文档：https://webpack.js.org/plugins/split-chunks-plugin/

## optimization.runtimeChunk

optimization.runtimeChunk选项用于配置运行时代码的分割策略。运行时代码是Webpack打包过程中自动生成的代码，用于初始化Webpack运行环境和加载模块。

optimization.runtimeChunk选项的详细用法请参考Webpack官方文档：https://webpack.js.org/plugins/runtime-chunk-plugin/

## 实例

以下是一个使用optimization.splitChunks和optimization.runtimeChunk选项的Webpack配置示例：

```javascript
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "commons",
          chunks: "all",
        },
      },
    },
    runtimeChunk: true,
  },
};