随着项目一点点的深入,对于webpack的配置也是改了又改,看了又看,这里就再记录一下CommonsChunkPlugin的用法,多用于个人记忆。希望对你有所帮助。
基本使用
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: module => { // 所有 node_modules 下的文件 return module.resource && /node_modules/.test(module.resource) }, }),
CommonsChunkPlugin配置项
1、name和names
a.如果name的值不与任何已存在的chunk相同,则会从options.chunks中提取出公共代码,并形成新的chunk,并以options.name去设置该chunk的name。
b.如果name选中的是已存在的chunk,则会从options.chunks中提取出被name选中的chunk。
c.如果name是不存在的chunk,则会根据其他配置提取出公共chunk,并将该chunk的name值设为opitons.name的值。
d.如果name是个数组,则等同于每个name轮番调用该插件。
2、filename common chunk存入本地的文件名,未设置的话就默认使用chunk的名字。
3、minChunks 此属性可以有以下的选项
a. 设定为数字(大于等于2),指定共用模块被多少个 chunk 使用才能被合并。
b. 也可以设为函数,接受 (module, count) 两个参数,就像基本使用的代码那样。
c. Infinity,创建common chunk但是不合并任何公共模块,就是一个空模块。可以搭配entry的配置
entry: { vendor: ["jquery", "other-lib"], app: "./entry" } new webpack.optimize.CommonsChunkPlugin({ name: "vendor", // filename: "vendor.js" // (Give the chunk a different name) minChunks: Infinity, // (with more entries, this ensures that no other module // goes into the vendor chunk) })
4、chunks 指定源chunk,设置了webpack会只从这些chunk中合并公共模块,否则m默认所有的chunk。
5、children,async这个两个主要是用于异步加载的,如果我们不设置children和async两个选项的话,那么所有异步加载的chunk中的公共模块会被重复打包。
// 举个例子,一个项目入口js是index.js,还有有三个页面A,B,C,对应的js分别是A.js,B.js,C.js,每个页面都引用了antd这个module,这时候我们为了优化项目首页的加载速度,我们想把三个页面的代码异步加载,所以我们如下设置 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: module => { // 所有 node_modules 下的文件 return module.resource && /node_modules/.test(module.resource) }, }), // 这样设置后首页的index.js确实变小,首页加载速度变快了,但是我们发现A,B,C这个三个js里面都会有antd这个module的代码,就相当于antd这个库代码被重复加载了三次,这就很尴尬了。所以就需要children这个属性了,我们再加一个配置 new webpack.optimize.CommonsChunkPlugin({ children: true, minChunks: (module, count) => { // 被 3 个及以上 chunk 使用的共用模块提取出来 return count >= 3 } }), // 这时候打包完成后你再去看发现A,B,C这个三个js里面的antd已经没有了,但是它跑到index.js这个入口文件里面去了,这就是相当于又增加了首页的加载时间啊。这是因为当你只设置children为true时,所有异步加载的chunk的公共模块会被打包进父chunk中,这里就是入口的index.js中。那我们就改一下上面的配置: new webpack.optimize.CommonsChunkPlugin({ async: 'async', children: true, minChunks: (module, count) => { // 被 3 个及以上 chunk 使用的共用模块提取出来 return count >= 3 } }) // 这时候打包完成后你会发现又生成了一个async的chunk文件,里面就是antd这个库,A,B,C和index中都没有antd了。原来设置了async,所有异步加载的chunk的公共模块不会再被打包进父chunk中,而是使用新的异步加载的额外模块chunk,当异步加载的子chunk被加载时,它会被自动并行加载。
// 最终代码 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: module => { return module.resource && /node_modules/.test(module.resource) }, }), new webpack.optimize.CommonsChunkPlugin({ async: 'async-vendor', children: true, minChunks: (module, count) => { return count >= 3 } }),
参考资料: 资料