webpack 代码分片

Published: · LastMod: May 24, 2022 · 214 words

webpack CommonsChunkPlugin 🔗

代码分片是webpack中重要的优化手段，对于一个比较大的chunk，有必要提取出当前chunk中依赖的不经常变化的库

usage 🔗

1

new webpack.optimize.CommonsChunkPlugin()

配置项 🔗

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
	 name: string, // 提取出来的chunk的名称
   names: string[], // 名称输入字符串数组时，相当于多次调用本插件
   filename: string, // 
   minSize: number,
   minChunks: number|Infinity|function(module, count) => boolean, // 最少引用次数
   chunks: string[], // 这里的chunks， 和入口部分的chunk一一对应，如果出现在其中，就会被单独提取出来，如果省略，即所有入口chunk都会被选择
   children: boolean,
   deepChildren: boolean,
   async: boolean|string,
}
webpack