Webpack 4 SplitChunksPlugin 配置详解与实战指南

Webpack 4 SplitChunksPlugin 配置详解与实战指南

前言

此前曾撰写过关于 Webpack 4 的不完全升级指南，并记录了从 Webpack 3.x 迁移过程中遇到的相关问题，感兴趣读者可参考查阅。

参数说明

0. 参数说明

首先对各项参数进行大致了解。尽管官方更新文档已多次查阅，但为确保准确性，仍参考了新版 Webpack 源码。以下是各参数及其具体含义：

1. chunks：指定包含的模块范围，可选值包括 initial（初始块）、async（按需加载块）以及 all（全部块），默认值为 all。
2. minSize：压缩前模块的最小体积，默认值为 0。
3. minChunks：模块被引用的最小次数，默认值为 1。
4. maxAsyncRequests：异步加载时的最大请求次数，默认值为 1。
5. maxInitialRequests：初始化加载时的最大请求次数，默认值为 1。
6. name：拆分后生成的块名称（Chunk Names），默认根据块名和哈希值自动生成。
7. cacheGroups：缓存组配置。

缓存组是一个对象，除了可以继承上述 chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests 和 name 等参数外，还包含其他特定参数：

若未在缓存组中重新赋值，则默认继承上述选项。但部分参数必须在缓存组中单独配置。

1. priority：缓存组的优先级。
2. test：缓存组的匹配规则，符合条件的模块将被放入当前缓存组。该参数值可以是 function、boolean、string 或 RegExp，默认为空。
3. reuseExistingChunk：允许复用已存在的块。即如果满足条件的块已存在，则直接使用现有块，不再创建新块。

基本用法

1. 基本用法

在新版 Webpack 中，代码默认会自动进行拆分，其拆分规则如下：

1. 模块被重复引用，或者来自 node_modules 中的模块。
2. 压缩前体积最小为 30kb。
3. 按需加载时，请求数量小于等于 5。
4. 初始化加载时，请求数量小于等于 3。

对于小于 30kb 的模块，单独发送一次请求并不划算。在模块体积较小的前提下，相比多次打包，减少请求次数的成本更低。

当然，也可以不使用默认配置，例如如下示例：

new webpack.optimize.SplitChunksPlugin({
  chunks: "all",
  minSize: 20000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true
)}

上述代码表示，在所有代码中，引用模块大小最小为 20kb，引用次数最少为 1 次，按需加载最大请求次数为 5，初始化加载最大请求次数为 3 的所有模块将被拆分到一个单独的代码块中。name 用于指定代码块名称，若设置为 true，则表示根据模块和缓存组密钥自动生成名称。

使用缓存组 (Cache Groups)

2. 使用缓存组 (Cache Groups)

若需进一步细分代码，可使用缓存组 (Cache Groups)。同样，缓存组也有默认配置：默认将 node_modules 中的模块拆分至名为 vendors 的代码块中，并将最少重复引用两次的模块放入 default 中。

以下为官方示例代码：

splitChunks: {
  chunks: "async",
  minSize: 30000,
  minChunks: 1,
  maxAsyncRequests: 5,
  maxInitialRequests: 3,
  name: true,
  cacheGroups: {
    default: {
      minChunks: 2,
      priority: -20
      reuseExistingChunk: true,
    },
    vendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10
    }
  }
}

以上是缓存组的默认配置。可以通过 default:false 禁用默认缓存组，随后即可自定义缓存组，将初始化加载时被重复引用的模块进行拆分，配置如下：

cacheGroups: {
  commons: {
    name: "commons",
    chunks: "initial",
    minChunks: 2
  }
}

此后可根据具体需求，自由创建多个缓存组：

cacheGroups: {
  a: {
    // ...
  },
  b: {
    // ...
  }
  // ...
}

结语

结语

Webpack 更新已过去多日，近期已将基本更新内容梳理完毕，在此记录以便日后查阅。如有理解不当之处，敬请指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。