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并没有抽离出来。

链接文章

webpack学习之路（八）压缩代码

webpack学习之路（七）source map

webpack学习之路（六）hash/chunkHash/contentHash

webpack学习之路（五）loader初识及常用loader介绍

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（三）webpack-dev-middleware

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置

I am moving forward.

webpack学习之路（九）SplitChunksPlugin配置

拆分条件

参数列表

示例

链接文章