一 、SplitChunks插件配置选项
chunks
选项,决定要提取那些模块。- 默认是
async
:只提取异步加载的模块出来打包到一个文件中。- 异步加载的模块:通过
import('xxx')
或require(['xxx'],() =>{})
加载的模块。
- 异步加载的模块:通过
- 默认是
initial
:提取同步加载和异步加载模块,如果xxx在项目中异步加载了,也同步加载了,那么xxx这个模块会被提取两次,分别打包到不同的文件中。- 同步加载的模块:通过
import xxx
或require('xxx')
加载的模块。
- 同步加载的模块:通过
all
:不管异步加载还是同步加载的模块都提取出来,打包到一个文件中。minSize
选项:规定被提取的模块在压缩前的大小最小值,单位为字节,默认为30000,只有超过了30000字节才会被提取。maxSize
选项:把提取出来的模块打包生成的文件大小不能超过maxSize值,如果超过了,要对其进行分割并打包生成新的文件。单位为字节,默认为0,表示不限制大小。minChunks
选项:表示要被提取的模块最小被引用次数,引用次数超过或等于minChunks值,才能被提取。maxAsyncRequests
选项:最大的按需(异步)加载次数,默认为 6。maxInitialRequests
选项:打包后的入口文件加载时,还能同时加载js文件的数量(包括入口文件),默认为4。- 先说一下优先级
maxInitialRequests
/maxAsyncRequests
<maxSize
<minSize
。 automaticNameDelimiter
选项:打包生成的js文件名的分割符,默认为~
。name
选项:打包生成js文件的名称。cacheGroups
选项,核心重点,配置提取模块的方案。里面每一项代表一个提取模块的方案。下面是cacheGroups
每项中特有的选项,其余选项和外面一致,若cacheGroups
每项中有,就按配置的,没有就使用外面配置的。test
选项:用来匹配要提取的模块的资源路径或名称。值是正则或函数。priority
选项:方案的优先级,值越大表示提取模块时优先采用此方案。默认值为0。reuseExistingChunk
选项:true
/false
。为true
时,如果当前要提取的模块,在已经在打包生成的js文件中存在,则将重用该模块,而不是把当前要提取的模块打包生成新的js文件。enforce
选项:true
/false
。为true
时,忽略minSize
,minChunks
,maxAsyncRequests
和maxInitialRequests
外面选项
也就是说,在不影响代码正确执行的前提下,最优化的代码压缩配置为如下:
module.exports = {
//...
optimization: {
splitChunks: {
//在cacheGroups外层的属性设定适用于所有缓存组,不过每个缓存组内部可以重设这些属性
chunks: "async", //将什么类型的代码块用于分割,三选一: "initial":入口代码块 | "all":全部 | "async":按需加载的代码块
minSize: 30000, //大小超过30kb的模块才会被提取
maxSize: 0, //只是提示,可以被违反,会尽量将chunk分的比maxSize小,当设为0代表能分则分,分不了不会强制
minChunks: 1, //某个模块至少被多少代码块引用,才会被提取成新的chunk
maxAsyncRequests: 5, //分割后,按需加载的代码块最多允许的并行请求数,在webpack5里默认值变为6
maxInitialRequests: 3, //分割后,入口代码块最多允许的并行请求数,在webpack5里默认值变为4
automaticNameDelimiter: "~", //代码块命名分割符
name: true, //每个缓存组打包得到的代码块的名称
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/, //匹配node_modules中的模块
priority: -10, //优先级,当模块同时命中多个缓存组的规则时,分配到优先级高的缓存组
},
default: {
minChunks: 2, //覆盖外层的全局属性
priority: -20,
reuseExistingChunk: true, //是否复用已经从原代码块中分割出来的模块
},
styles: {
name: 'styles',
test: /\.(s?css|vue|less)$/,
chunks:"all",
enforce: true
},
common: {
name: "common",
chunks: "all",
minChunks: 2,
priority: 10,
}
},
},
},
};