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
: 抽离公共包的最小sizemaxSize
: 最大sizeminChunks
: 最少使用次数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学习之路(六)hash/chunkHash/contentHash
webpack学习之路(五)loader初识及常用loader介绍
webpack学习之路(四)webpack-hot-middleware实现热更新
webpack学习之路(三)webpack-dev-middleware
webpack学习之路(二)webpack-dev-server实现热更新
I am moving forward.