資訊專欄INFORMATION COLUMN
摘要：未定義時(shí)使用作為文件名。表示公共創(chuàng)建所需要的所有模塊的最小體積。如果設(shè)置為，公共的所有子模塊將會(huì)被選中。使用來(lái)命名文件，實(shí)現(xiàn)文件緩存的功能。當(dāng)文件內(nèi)容發(fā)生變化，文件名會(huì)隨之改變。代碼中再次使用了，從中提取出了名為的運(yùn)行時(shí)代碼。
CommonsChunkPlugin配置簡(jiǎn)介
最近讀了一下webpack的文檔，讀到CommonsChunkPlugin這個(gè)插件，深深折服于webpack的強(qiáng)大，同時(shí)也產(chǎn)生了一些自己的疑問。
首先，CommonsChunkPlugin這個(gè)插件是用來(lái)提取公共代碼的，通過將公共模塊提取出來(lái)，只在頁(yè)面加載的時(shí)候引入一次，提升應(yīng)用的加載效率。
順便提一下，chunk其實(shí)就是代碼塊的意思，可能是一個(gè)或多個(gè)模塊，一般提取后就是一個(gè)js文件。
CommonsChunkPlugin有中文翻譯的文檔，但是感覺并不是很通順，英文文檔看完也有一些疑惑，比如minChunks到底是做什么用的，怎么用？chunks是什么？
配置項(xiàng)首先貼一下文檔。
{
name: "string",
names: "string[]",
filename: "string",
minChunks: "number|Infinity|function(module, count) -> boolean",
chunks: "string[]",
children: "boolean",
async: "boolean|string",
minSize: "number"
}
name和names：chunk的名稱，如果這個(gè)chunk已經(jīng)在entry中定義，該chunk會(huì)被直接提??；如果沒有定義，則生成一個(gè)空的chunk來(lái)提取其他所有chunk的公共代碼。
filename：可以指定提取出的公共代碼的文件名稱，可以使用output配置項(xiàng)中文件名的占位符。未定義時(shí)使用name作為文件名。
chunks：可以指定要提取公共模塊的源chunks，指定的chunk必須是公共chunk的子模塊，如果沒有指定則使用所有entry中定義的入口chunk。
minChunks：在一個(gè)模塊被提取到公共chunk之前，它必須被最少minChunks個(gè)chunk所包含（通俗的說就是一個(gè)模塊至少要被minChunks個(gè)模塊所引用，才能被提取到公共模塊。）。minChunks參數(shù)有三點(diǎn)需要說明：
該數(shù)字必須不小于2或者不大于chunks的個(gè)數(shù)。默認(rèn)值等于chunks的個(gè)數(shù)。
如果指定了Infinity，則創(chuàng)建一個(gè)公共chunk，但是不包含任何模塊，內(nèi)部是一些webpack生成的runtime代碼和chunk自身包含的模塊（如果chunk存在的話）。
用戶也可以定制自己的邏輯去生成代碼。
minSize：表示公共chunk創(chuàng)建所需要的所有模塊的最小體積。
async：如果設(shè)置為true，一個(gè)異步的公共chunk將會(huì)作為options.name的子塊和options.chunks的兄弟塊被創(chuàng)建。該chunk會(huì)與options.chunks并行加載。你也可以使用該參數(shù)指定輸出的文件名。
children：如果設(shè)置為true，公共chunk的所有子模塊將會(huì)被選中。
例子我們看一個(gè)簡(jiǎn)單的例子。
module.exports = {
entry: {
app: "./src/index.js",
vender: [
"lodash",
"otherlib"
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vender"
})
],
output: {
// 使用Hash來(lái)命名文件，實(shí)現(xiàn)文件緩存的功能。當(dāng)文件內(nèi)容發(fā)生變化，文件名會(huì)隨之改變。
filename: "[name].[chunkhash].js",
path: path.resolve(__dirname, "dist")
}
};
上面的代碼中定義了兩個(gè)入口，app和vender（公共庫(kù)），plugins中使用CommonsChunkPlugin提取vender。
vender是我們提取出來(lái)的公共chunk，通常不會(huì)被修改，所以理應(yīng)在每次編譯后文件名保持一致。然而，我們嘗試修改入口文件index.js會(huì)發(fā)現(xiàn)，vender的文件名會(huì)發(fā)生變化。
原因呢上面提到過，由于每次編譯會(huì)導(dǎo)致vender的module.id發(fā)生變化，內(nèi)部的runtime代碼隨之發(fā)生改變。
解決方案有以下幾種：
使用NamedModulesPlugin插件，用文件路徑而非默認(rèn)的數(shù)字ID來(lái)作為模塊標(biāo)識(shí)。
使用HashedModuleIdsPlugin插件，用相對(duì)路徑的Hash值來(lái)作為模塊標(biāo)識(shí)。推薦在生產(chǎn)環(huán)境中使用。
將runtime部分的代碼提取到一個(gè)多帶帶的文件中，代碼如下。
module.exports = {
entry: {
app: "./src/index.js",
vender: [
"lodash"
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "vender",
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
chunks: ["vender"]
})
],
output: {
filename: "[name].[chunkhash].js",
path: path.resolve(__dirname, "dist")
}
};
代碼中再次使用了CommonsChunkPlugin，從vender中提取出了名為manifest的運(yùn)行時(shí)代碼。
分析Vue的使用方式Vue在production模式中使用如下配置
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, "../node_modules")
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
chunks: ["vendor"]
})
自定義minChunks
minChunks配置項(xiàng)有兩個(gè)參數(shù)，module為當(dāng)前要提取的源chunk中所包含的模塊，count表示模塊的個(gè)數(shù)。
自定義函數(shù)會(huì)被循環(huán)調(diào)用，直到遍歷完所有模塊。
module.resource為模塊的絕對(duì)路徑，所以這段代碼判斷了模塊是否在node_modules下，是的話則打包到vender中。
后面一個(gè)CommonsChunkPlugin從vender中提取了運(yùn)行時(shí)代碼，避免每次打包vender的Hash值都發(fā)生變化導(dǎo)致緩存無(wú)效。
如有問題，歡迎指正。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89000.html
摘要：可以通過配置屬性進(jìn)行修改，默認(rèn)將會(huì)自動(dòng)創(chuàng)建個(gè)庫(kù)文件僅含有依然會(huì)創(chuàng)建個(gè)庫(kù)文件僅含有假設(shè)所有的體積都大于將會(huì)創(chuàng)建一個(gè)庫(kù)文件和一個(gè)通用組件文件僅含有當(dāng)這些體積小于是，會(huì)故意將該模塊復(fù)制到三個(gè)文件中。 該文章內(nèi)容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization 原有的問題 webpack...
摘要：概述上一章講的是，和這一章依舊沒有絲毫關(guān)系，這一章講的是說實(shí)在的，這個(gè)插件略復(fù)雜，我還沒完全搞懂，大概是還沒到那么深我就已經(jīng)選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個(gè)包當(dāng)然還有許多更加復(fù)雜的用法，還請(qǐng)看關(guān)于章節(jié)資源源代碼 0x001 概述 上一章講的是providerPlugin，和這一章依舊沒有絲毫關(guān)系，這一章講的是CommonsChunkPlugin,說實(shí)在的，這...
摘要：續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說完了本地測(cè)試和是如何工作，接下來(lái)分析構(gòu)建生產(chǎn)模式下配置如何配置和每個(gè)模塊干了什么。 續(xù) 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上） 工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...
摘要：，顧名思義，是用來(lái)把公用模塊打包到一起的插件，以減小打包后文件的體積。令人迷惑的中文社區(qū)和官網(wǎng)都對(duì)此屬性語(yǔ)焉不詳。官網(wǎng)的解釋我實(shí)在看不懂在被放到共同之前需要包含模塊的的最小數(shù)量。當(dāng)大于等于設(shè)定的值時(shí)，該模塊就會(huì)被打包到公用包中。 CommonsChunkPlugin， 顧名思義，是用來(lái)把公用模塊打包到一起的插件，以減小打包后js文件的體積。 令人迷惑的minChunks 中文社區(qū)和官網(wǎng)...
摘要：通過函數(shù)，指定三個(gè)入口文件為，同時(shí)我們還要設(shè)置為，表示指定三個(gè)入口文件中提取出的公共文件，最少要被三個(gè)不同的入口文件引用。所以就是從三個(gè)入口文件中提取公共的文件。從兩個(gè)公共文件中，再提取公共部分先說一下，這是什么意思有個(gè)公共文件。 在不明白CommonsChunkPlugin的使用情況下，直接上手webpack4的splitChunks，實(shí)在是難上加難。為了能更好的理解splitChu...
閱讀 1734·2021-11-18 10:02
閱讀 2243·2021-11-15 11:38
閱讀 2695·2019-08-30 15:52
閱讀 2219·2019-08-29 14:04
閱讀 3255·2019-08-29 12:29
閱讀 2109·2019-08-26 11:44
閱讀 1023·2019-08-26 10:28
閱讀 862·2019-08-23 18:37
