webpack 從指定入口文件中提取公共文件的方法
在不明白CommonsChunkPlugin的使用情況下，直接上手webpack4的splitChunks，實在是難上加難。為了能更好的理解splitChunks的使用，必須出個題目，練練手，才能從中有所收獲（下面的題目不考慮實際應用場景）：
從指定入口文件中提取公共文件
CommonsChunkPlugin的實現(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的實現(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'，同時我們還要設置minChunks為3，表示指定三個入口文件中提取出的公共文件，最少要被三個不同的入口文件引用。所以就是從三個入口文件中提取公共的文件。
從兩個公共文件中，再提取公共部分
先說一下，這是什么意思：
- 有6個公共文件a,b,c,d,e,f。
- 從a,b,c中提取其公共的部分x，從d,e,f中也提取公共部分y。
- 從x，y中再提取公共部分z。
下面給出webpack3 和webpack4下的處理
CommonsChunkPlugin的實現(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的實現(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);
}
}
}
}
}
我沒有從文檔中找到：提取公共文件之后再處理的方法。所以我用了另外一種方式：
- 先從6個文件中提取出公共的文件，即common3（common1和common2的公共文件）。
- 從'index','index1','index2'中提取common1
- 從'app','app1','app2'中提取common2
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript每日必學之運算符，javscript的邏輯中的正序，分支，循環(huán)以及一些簡單的運算符，想要成為javascript大神的朋友不要錯過，閱讀一下2016-02-02
最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)
這篇文章主要介紹了最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動
這篇文章主要介紹了jquery實現(xiàn)下拉菜單的二級聯(lián)動利用json對象從DB取值顯示聯(lián)動,需要的朋友可以參考下2014-03-03
本篇文章主要是對php析構函數(shù)的具體用法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
微信小程序 連續(xù)旋轉動畫（this.animation.rotate）詳解
這篇文章主要介紹了微信小程序 連續(xù)旋轉動畫（this.animation.rotate）詳解的相關資料,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄獪\談JavaScript中數(shù)組的增刪改查。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了小程序中無法直接導出PDF或文檔的解決方案,通過調用API下載文件并打開,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了uniapp實現(xiàn)橫屏簽字版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要對比了js創(chuàng)建對象幾種方式的優(yōu)缺點，感興趣的小伙伴們可以參考一下2016-09-09
2006-09-09