資訊專欄INFORMATION COLUMN
摘要：，顧名思義，是用來(lái)把公用模塊打包到一起的插件，以減小打包后文件的體積。令人迷惑的中文社區(qū)和官網(wǎng)都對(duì)此屬性語(yǔ)焉不詳。官網(wǎng)的解釋我實(shí)在看不懂在被放到共同之前需要包含模塊的的最小數(shù)量。當(dāng)大于等于設(shè)定的值時(shí)，該模塊就會(huì)被打包到公用包中。
CommonsChunkPlugin， 顧名思義，是用來(lái)把公用模塊打包到一起的插件，以減小打包后js文件的體積。
令人迷惑的minChunks中文社區(qū)和官網(wǎng)都對(duì)此屬性語(yǔ)焉不詳。
首先，minChunks的Chunk是什么意思？
…… a separate file (known as a chunk).
意思是當(dāng)entry屬性的值為對(duì)象時(shí)，作為多個(gè)入口的文件們，每個(gè)都是一個(gè)chunk。
理解了chunk的定義，再來(lái)看看官網(wǎng)對(duì)minChunks的解釋：
minChunks: number|Infinity|function(module, count) -> boolean,
// The minimum number of chunks which need to contain a module before it"s moved into the commons chunk.
// The number must be greater than or equal 2 and lower than or equal to the number of chunks.
// Passing Infinity just creates the commons chunk, but moves no modules into it.
// By providing a function you can add custom logic. (Defaults to the number of chunks)
需要重點(diǎn)關(guān)注的額是minChunks的number值。
官網(wǎng)的解釋我實(shí)在看不懂：在被放到共同chunks之前需要包含模塊的chunks的最小數(shù)量。
這是什么鬼意思，有沒(méi)有洋文好的大佬翻譯一下？
那么minChunks的值為number時(shí)，由什么效果呢？
經(jīng)過(guò)我測(cè)試，發(fā)現(xiàn)minChunks是指某個(gè)模塊最少被多少個(gè)入口文件依賴。
當(dāng)大于等于minChunks設(shè)定的值時(shí)，該模塊就會(huì)被打包到公用包中。
小于這個(gè)值時(shí)，該模塊就會(huì)被和每個(gè)入口文件打包在一起。
比如，有八個(gè)入口文件，minChunks值為7，那么，就算某個(gè)模塊被6個(gè)入口文件依賴了，這個(gè)模塊也會(huì)被打包6次，每個(gè)依賴他的文件中都有一份相同的代碼。
minChunks:Infinity搞懂了minChunks的number屬性，Infinity屬性就很好理解了。也就是不會(huì)把任何依賴的模塊提取出來(lái)打包公用。
minChunks默認(rèn)值當(dāng)忽略此屬性時(shí)，只有在被所有入口文件都依賴時(shí)，才會(huì)提取相應(yīng)模塊。
水平有限，說(shuō)錯(cuò)了輕噴。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/107390.html
摘要：續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說(shuō)完了本地測(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...
摘要：未定義時(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í)際開(kāi)發(fā)遇到的問(wèn)題為核心，悉數(shù)利用提取獨(dú)立文件模塊的應(yīng)用。利用插件是專門(mén)用來(lái)提取獨(dú)立文件的，它主要是提取多個(gè)入口的公共模塊。插入標(biāo)簽的這一步可以在打包好獨(dú)立文件之前，就在模板中插入。 前言 最近重新看了一遍 webpack 提取公共文件的配置。原來(lái)覺(jué)得這東西是個(gè)玄學(xué)，都是 憑感覺(jué) 配置。這篇文章將以解決實(shí)際開(kāi)發(fā)遇到的問(wèn)題為核心，悉...
摘要：表示生成一個(gè)懶加載的，只有當(dāng)需要時(shí)才會(huì)被加載。主要是作用域提升，將所有模塊放在同一個(gè)作用域當(dāng)中，一方面能提高運(yùn)行速度，另一方面也能降低文件體積。前提是你的代碼是用模塊寫(xiě)的。參考文章學(xué)習(xí)小結(jié) 前言 之前接手公司一個(gè)前端項(xiàng)目，開(kāi)發(fā)了幾個(gè)月后越來(lái)越難以忍受項(xiàng)目結(jié)構(gòu)的混亂和打包體積的臃腫（腳手架和基本功能代碼都是從公司的其他項(xiàng)目復(fù)制過(guò)來(lái)的），如果不立即進(jìn)行重構(gòu)，難以想象以后要怎么維護(hù)各個(gè)產(chǎn)品線...
摘要：但是同時(shí)，抽離到父模塊，也意味著如果有一個(gè)懶加載的路由沒(méi)有用到模塊，但是實(shí)際上引入了父模塊，也為這也引入了的代碼。 前言 我們清楚，在 webpack 中通過(guò)CommonsChunkPlugin 可以將 entry 的入口文件中引用多次的文件抽離打包成一個(gè)公用文件，從而減少代碼重復(fù)冗余 entry: { main: ./src/main.js, ...
閱讀 996·2021-10-25 09:48
閱讀 698·2021-08-23 09:45
閱讀 2551·2019-08-30 15:53
閱讀 1806·2019-08-30 12:45
閱讀 735·2019-08-29 17:21
閱讀 3550·2019-08-27 10:56
閱讀 2607·2019-08-26 13:48
閱讀 756·2019-08-26 12:24
