optimization.splitChunks
optimization.splitChunks 配置对象代表了 splitChunksPlugin 的默认行为。
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async', // 针对异步代码分割
minSize: 20000, // 代码分割的阈值
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
};
配置参数详解
针对异步/同步代码分割 - chunks
作用: 这表明将选择哪些chunks进行优化。
用法:string = ‘async’ function (chunk)
当提供一个字符串,值可以为 ‘all‘,’async‘(默认值)和 initial。
- 'async'(默认值):仅针对**异步代码**分割;(针对异步引入的库进行分离)<br /> - 'initial':仅对同步引入的库进行分离<br /> - 'all':针对**所有的代码**分割,包括同步代码和异步代码(注意!!!如果是同步代码分割的话,还需要配置 cacheGroups配置项,把分割的部分分组打包,如下写法)(**推荐!**)
module.exports = {
// ...
optimization: {
splitChunks: {
cacheGroups: {
vendors:{
test:/[\\/]node_modules[\\/]/,
priority:-10,
filename:'vendros.js'
},
default:false
}
}
}
}
解释:引入lodash库时,会先检测是否在node_modules中,如果在就会单独打包到vendors组中,同时bundle名统一为vendors.js
minSize
作用:当引入的包大于minSize值的时候,才会做代码分割;否则就不会做。
minSize: 30000 // 引入的模块或库大于30KB才会做代码分割,如果小于就不做代码分割
minChunks
lodash库很大,所以会帮你做代码分割。一般这个配置项的大小不用变。
minChunks:1 //至少被引入1次才会做代码分割
name
作用:设置拆包的名称。
name值
- 可以设置一个名称;
- 也可以设置为false。如果设置为 false 的话,需要在cacheGroups 中设置名称。
cacheGroups
作用:用于对拆分的包进行分组。比如一个lodash在拆分之后,并不会立即打包,而是会等到有没有其他符合规则的包一起来打包;
cacheGroups中的配置
- test属性:匹配符合规则的包;
- name属性:拆分包的name属性;
filename:拆分包的名称,可以自己试用placeholder属性。
cacheGroups:{
vendors:{
test:/[\\/]node_modules[\\/]/,
priority:-10,
filename:'vendros.js'
},
default:{
priority:-20,
resueExistingChunk:true,
filename:common.js
}
}
决定分割代码放到哪个JS文件里面去,通过test进行索引,然后filename进行命名。
这个缓存组的概念其实就是当你引入不同库,例如jquery和lodash时候,他们会根据规则选择打包到哪一个JS文件里面,形成一组。priority:代码优先级,如果某一个模块执行test后同时符合多个组,那么谁的优先级高,就放到哪个组里面~
- reuseExistingChunk: 会判断某一个模块是否已经加载到别的组了,如果是那么就会直接复用,不会再次引入