前端资讯Webpack 4 将移除 CommonsChunkPlugin

Posted 2021-04-29 FEPulse

近日，webpack 团队发推表示，webpack 4 将移除 CommonsChunkPlugin, 取而代之的是两个新的配置项 optimization.splitChunks 和 optimization.runtimeChunk。

CommonsChunkPlugin

在理解 CommonsChunkPlugin 之前，我们需要熟悉 webpack 中 chunk 的概念，webpack 将多个模块打包之后的代码集合称为 chunk。为了将一些很少变化的常用库（react、redux、lodash）与业务代码分开，或者是一些不同入口共同使用的公共模块，开发者常常需要将它们单独打包，这些都可以通过配置 CommonsChunkPlugin 来实现。下面是一个 CommonsChunkPlugin 的简单示例：

简单来说，CommonsChunkPlugin 的作用主要体现在代码分割和性能优化上，主要有如下几个方面：

• 提取常用库代码

• 提取公有代码

• 提取 webpack 的 runtime (运行时) 代码

更新

webpack 4 准备通过 optimization.splitChunks 和 optimization.runtimeChunk 属性来简化代码分割的配置

optimization.splitChunks

通过设置 optimization.splitChunks.chunks:  "all" 来启动默认的代码分割配置项。

当满足如下条件时，webpack 会自动打包 chunks:

• 当前模块是公共模块（多处引用）或者模块来自 node_modules

• 当前模块大小大于 30kb

• 如果此模块是按需加载，并行请求的最大数量小于等于 5

• 如果此模块在初始页面加载，并行请求的最大数量小于等于 3
  

当然，开发者也可以通过修改配置来更换自动打包的条件。

optimization.runtimeChunk

通过设置 optimization.runtimeChunk: true 来为每一个入口默认添加一个只包含 runtime 的 chunk。