在不明白CommonsChunkPlugin的使用情況下，直接上手webpack4的splitChunks，實(shí)在是難上加難。為了能更好的理解splitChunks的使用，必須出個題目，練練手，才能從中有所收獲（下面的題目不考慮實(shí)際應(yīng)用場景）：
成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、微信小程序、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立十載以來，已經(jīng)為千余家成都火鍋店設(shè)計各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?，F(xiàn)在，服務(wù)的千余家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。
從指定入口文件中提取公共文件
重慶分公司
重慶分公司
CommonsChunkPlugin的實(shí)現(xiàn)：
entry: {
index:'./src/index.js',
index1:'./src/index1.js',
index2:'./src/index2.js'
},
plugins: [
new CommonsChunkPlugin({
name:"common1",
chunks:['index','index1','index2']
})
]其中index和index1以及index2都是打包的入口文件。
splitChunks的實(shí)現(xiàn)：
optimization: {
splitChunks: {
chunks:"all",
minSize: 0,
cacheGroups: {
common: {
minChunks: 3,
priority: -1,
name:'common',
chunks (chunk) {
// exclude `my-excluded-chunk`
return ['index','index1','index2'].includes(chunk.name);
}
}
}
}
}
在cacheGroups下面我們定義了一個common。通過chunks函數(shù)，指定三個入口文件為：'index','index1','index2'，同時我們還要設(shè)置minChunks為3，表示指定三個入口文件中提取出的公共文件，最少要被三個不同的入口文件引用。所以就是從三個入口文件中提取公共的文件。
從兩個公共文件中，再提取公共部分
先說一下，這是什么意思：
下面給出webpack3 和webpack4下的處理
CommonsChunkPlugin的實(shí)現(xiàn)：
new CommonsChunkPlugin({
name:"common1",
chunks:['index','index1','index2']
}),
new CommonsChunkPlugin({
name:"common2",
chunks:['app','app1','app2']
}),
new CommonsChunkPlugin({
name:"common3",
chunks:['common1','common2']
})
很清楚，先從'index','index1','index2'中提取公共文件‘common1',再從'app','app1','app2'中提取公共文件‘common2'。最后從‘common1'和‘common2'中再提取出公共文件common3。
splitChunks的實(shí)現(xiàn)：
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks:"all",
minSize: 0,
cacheGroups: {
common3: {
minChunks: 6,
priority: 1,
reuseExistingChunk: true
},
common2: {
minChunks: 3,
priority: -2,
name:'common2',
chunks (chunk) {
// exclude `my-excluded-chunk`
return ['app','app1','app2'].includes(chunk.name);
}
},
common1: {
priority: -1,
name: 'common1',
minChunks: 3,
enforce: true,
chunks (chunk) {
return ['index','index1','index2'].includes(chunk.name);
}
}
}
}
}
我沒有從文檔中找到：提取公共文件之后再處理的方法。所以我用了另外一種方式：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
