webpack 代码分片

Published: · LastMod: April 07, 2024 · 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,
}