webapck v4开始，移除了CommonsChunkPlugin，转而使用SplitChunksPlugin作为新的代码块分割插件。

CommonsChunkPlugin主要是用来提取第三方库和公共模块，优化加载。SplitChunksPlugin同样也是这个作用。

SplitChunksPlugin是开箱即用的，这对大多数开发者来说非常友好。

拆分条件

webpack将根据以下条件自动拆分块：

• 可以共享的模块或来自node_modules文件夹的模块
• 超过30kb的块（在min + gz之前）
• 根据需要加载块时的并行请求数<=5
• 初始页面加载时的最大并行请求数<=3

参数列表

SplitChunksPlugin的参数是非常多的

optimization: {    splitChunks: {      chunks: 'async',      minSize: 30000,      maxSize: 0,      minChunks: 1,      maxAsyncRequests: 5,      maxInitialRequests: 3,      automaticNameDelimiter: '~',      automaticNameMaxLength: 30,      name: true,      cacheGroups: {        vendors: {          test: /[\\/]node_modules[\\/]/,          priority: -10        },        default: {          minChunks: 2,          priority: -20,          reuseExistingChunk: true        }      }    }}复制代码

• chunks: 打包的模块是异步、同步、还是全部，对应的值为async initial all，也可以写成函数形式，自定义打包
• minSize: 抽离公共包的最小size
• maxSize: 最大size
• minChunks: 最少使用次数
• maxAsyncRequests: 最大异步请求数
• maxInitialRequests: 最大同步请求数
• automaticNameDelimiter: 默认情况下，webpack将使用块的名称和原始文件名称生成文件名（例如vendors~main.js）。此选项允许您指定用于生成的名称的分隔符。
• automaticNameMaxLength: 允许设置由SplitChunksPlugin生成的块的名称字符的最大值
• maxAsyncRequests: 按需加载时最大并行请求数
• maxAsyncRequests: 入口处最大请求并行数
• name: 生成块的名称，为true时，将根据块和缓存组密钥自动生成名称
• cacheGroups: 缓存组可以继承或者覆盖上面的选项，但是priority test reuseExistingChunk 只能在这里设置。如果不想使用缓存组，可以直接置为false
  • priority: 表示缓存的优先级；
  • test: 缓存组的规则，表示符合条件的的放入当前缓存组，值可以是function、boolean、string、RegExp，默认为空；
  • reuseExistingChunk: 表示可以使用已经存在的块，即如果满足条件的块已经存在就使用已有的，不再创建一个新的块。

示例

1.默认打包chunks: async

webpack.config.js

optimization: {    splitChunks: {        chunks: 'initial'    }}复制代码

a.js

import 'react'复制代码

b.js

import(/* webpackChunkName: "async-lodash" */ 'lodash')import 'react-dom'复制代码

我们 a.js同步引入了 react，在 b.js同步引入了 react-dom，异步引入了 lodash打包之后我们可以发现，同步引入原封不动都被打包到了 main.js，而异步引入的 lodash被单独独立成了一个模块。

所以SplitChunksPlugin的默认打包是异步打包。

2.chunks: initial

webpack.config.js

optimization: {    splitChunks: {        chunks: 'initial',        filename: 'vendor.js'    }}复制代码

依然是上面文件

打包之后我们可以发现， react和 react-dom都单独打包进了 vendor.js。异步依然是单独打包优化。

initial这个选项就是将所有来自node_modules的模块分配到一个叫vendors的缓存组。

3.chunks: all

webpack.config.js

optimization: {    splitChunks: {        chunks: 'all'    }}复制代码

all这个选项也会将所有来自node_modules的模块分配到一个叫vendors的缓存组。

这就很尴尬了，两个选项打包出来一样，不甚理解根本区别在哪？请精通的大佬赐教~

4.minChunks webpack.config.js

optimization: {    splitChunks: {        chunks: 'all',        minChunks: 2    }}复制代码

a.js

import 'react'复制代码

b.js

import './a'复制代码

因为只被调用了一次，不符合要求，所以react并没有单独打包成文件

5.cacheGroup

webpack.config.js

optimization: {    splitChunks: {        chunks: 'all',        cacheGroups: {            test: /lodash/          }    }}复制代码

a.js

import 'lodash'复制代码

b.js

import 'react'复制代码

因为test只匹配了lodash，所以react并没有抽离出来。

---

链接文章

I am moving forward.