摘要:,顧名思義,是用來把公用模塊打包到一起的插件,以減小打包后文件的體積。令人迷惑的中文社區和官網都對此屬性語焉不詳。官網的解釋我實在看不懂在被放到共同之前需要包含模塊的的最小數量。當大于等于設定的值時,該模塊就會被打包到公用包中。
CommonsChunkPlugin, 顧名思義,是用來把公用模塊打包到一起的插件,以減小打包后js文件的體積。
令人迷惑的minChunks中文社區和官網都對此屬性語焉不詳。
首先,minChunks的Chunk是什么意思?
…… a separate file (known as a chunk).
意思是當entry屬性的值為對象時,作為多個入口的文件們,每個都是一個chunk。
理解了chunk的定義,再來看看官網對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)
需要重點關注的額是minChunks的number值。
官網的解釋我實在看不懂:在被放到共同chunks之前需要包含模塊的chunks的最小數量。
這是什么鬼意思,有沒有洋文好的大佬翻譯一下?
那么minChunks的值為number時,由什么效果呢?
經過我測試,發現minChunks是指某個模塊最少被多少個入口文件依賴。
當大于等于minChunks設定的值時,該模塊就會被打包到公用包中。
小于這個值時,該模塊就會被和每個入口文件打包在一起。
比如,有八個入口文件,minChunks值為7,那么,就算某個模塊被6個入口文件依賴了,這個模塊也會被打包6次,每個依賴他的文件中都有一份相同的代碼。
minChunks:Infinity搞懂了minChunks的number屬性,Infinity屬性就很好理解了。也就是不會把任何依賴的模塊提取出來打包公用。
minChunks默認值當忽略此屬性時,只有在被所有入口文件都依賴時,才會提取相應模塊。
水平有限,說錯了輕噴。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/107390.html
摘要:續前端臨床手札構建逐步解構上工作流程案例最近添加了雪碧圖功能,并把替換成的,詳細可以看分支構建生產上一篇說完了本地測試和是如何工作,接下來分析構建生產模式下配置如何配置和每個模塊干了什么。 續 前端臨床手札——webpack構建逐步解構(上) 工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例:multip...
摘要:未定義時使用作為文件名。表示公共創建所需要的所有模塊的最小體積。如果設置為,公共的所有子模塊將會被選中。使用來命名文件,實現文件緩存的功能。當文件內容發生變化,文件名會隨之改變。代碼中再次使用了,從中提取出了名為的運行時代碼。 CommonsChunkPlugin配置簡介 最近讀了一下webpack的文檔,讀到CommonsChunkPlugin這個插件,深深折服于webpack的強大...
摘要:前言最近重新看了一遍提取公共文件的配置。這篇文章將以解決實際開發遇到的問題為核心,悉數利用提取獨立文件模塊的應用。利用插件是專門用來提取獨立文件的,它主要是提取多個入口的公共模塊。插入標簽的這一步可以在打包好獨立文件之前,就在模板中插入。 前言 最近重新看了一遍 webpack 提取公共文件的配置。原來覺得這東西是個玄學,都是 憑感覺 配置。這篇文章將以解決實際開發遇到的問題為核心,悉...
摘要:表示生成一個懶加載的,只有當需要時才會被加載。主要是作用域提升,將所有模塊放在同一個作用域當中,一方面能提高運行速度,另一方面也能降低文件體積。前提是你的代碼是用模塊寫的。參考文章學習小結 前言 之前接手公司一個前端項目,開發了幾個月后越來越難以忍受項目結構的混亂和打包體積的臃腫(腳手架和基本功能代碼都是從公司的其他項目復制過來的),如果不立即進行重構,難以想象以后要怎么維護各個產品線...
摘要:但是同時,抽離到父模塊,也意味著如果有一個懶加載的路由沒有用到模塊,但是實際上引入了父模塊,也為這也引入了的代碼。 前言 我們清楚,在 webpack 中通過CommonsChunkPlugin 可以將 entry 的入口文件中引用多次的文件抽離打包成一個公用文件,從而減少代碼重復冗余 entry: { main: ./src/main.js, ...
閱讀 846·2021-10-25 09:48
閱讀 617·2021-08-23 09:45
閱讀 2509·2019-08-30 15:53
閱讀 1765·2019-08-30 12:45
閱讀 608·2019-08-29 17:21
閱讀 3423·2019-08-27 10:56
閱讀 2557·2019-08-26 13:48
閱讀 704·2019-08-26 12:24