-
Notifications
You must be signed in to change notification settings - Fork 5
记录一下webpack的chunks #9
Copy link
Copy link
Open
Labels
Description
webpack的chunks是通过webpack内部的一个插件来实现的,在3版本及以前使用的是CommonsChunkPlugin;在4版本后开始使用SplitChunksPlugin,我们对于3版本及以前的不做解释,着眼未来,我们来看SplitChunksPlugin;我们根据配置来看:
module.exports = {
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
};
上面是webpack的默认配置,splitChunks就算你什么配置都不做它也是生效的,源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。
chunks意思为拆分模块的范围,有三个值:async、all和initial;三个值的区别如下:
- async表示只从异步加载得模块里面进行拆分,也就是动态加载import();
- initial表示只从入口模块进行拆分;
- all的话,就是包含上面两者,都会去拆分;
上面还有几个参数: - minChunks,代表拆分之前,当前模块被共享的次数,上面是1,也就是一次及以上次引用,就会拆分;改为2的话,就是两次及以上的引用会被拆分;
- minSize:生成模块的最小大小,单位是字节;也就是拆分出来的模块不能太小,太小的话进行拆分,多了一次网络请求,因小失大;
- maxAsyncRequests:用来限制异步模块内部的并行最大请求数的,也就是是每个动态import()它里面的最大并行请求数量,需要注意的是:
-
- import()本身算一个;
-
- 只算js的,不算其他资源,例如css等;
-
- 如果同时又两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来;
- maxInitialRequests:表示允许入口并行加载的最大请求数,之所以有这个配置也是为了对拆分数量进行限制,不至于拆分出太多模块导致请求数量过多而得不偿失,需要注意的是
-
- 入口本身算一个请求,
-
- 如果入口里面有动态加载的不算在内;通过runtimeChunk拆分出的runtime不算在内;只算js的,不算css的;
-
- 如果同时又两个模块满足cacheGroup的规则要进行拆分,但是maxInitialRequests的值只能允许再拆分一个模块,那尺寸更大的模块会被拆分出来;
- automaticNameDelimiter:这是个连接符,不用关注这个;
- name:该属性主要是为了打包后文件的命名,使用原名字命名为true,按照默认配置,就会是文件名~文件名.**.js
- cacheGroup:cacheGroups其实是splitChunks里面最核心的配置,splitChunks就是根据cacheGroups的配置去拆分模块的,
-
- test:正则匹配路径,表示只筛选从node_modules文件夹下引入的模块,所以所有第三方模块才会被拆分出来。
-
- priority:优先级,上面的default的优先级低于vendor;
-
- minChunks:这个其实也是个例子,和父层的含义是一样的,不过会覆盖父层定义的值,拆分之前,模块被共享使用的次数;
-
- reuseExistingChunk:是否使用以及存在的chunk,字面意思;
注意:
- reuseExistingChunk:是否使用以及存在的chunk,字面意思;
- cacheGroups之外设置的约束条件比如说默认配置里面的chunks、minSize、minChunks等等都会作用于cacheGroups,cacheGroups里面的值覆盖外层的配置;
- test、priority、reuseExistingChunk,这三个是只能定义在cacheGroup这一层的;
- 如果cacheGroups下面的多个对象的priority相同时,先定义的会先命中;
Reactions are currently unavailable