資訊專欄INFORMATION COLUMN
摘要：可以通過配置屬性進(jìn)行修改，默認(rèn)將會(huì)自動(dòng)創(chuàng)建個(gè)庫文件僅含有依然會(huì)創(chuàng)建個(gè)庫文件僅含有假設(shè)所有的體積都大于將會(huì)創(chuàng)建一個(gè)庫文件和一個(gè)通用組件文件僅含有當(dāng)這些體積小于是，會(huì)故意將該模塊復(fù)制到三個(gè)文件中。
該文章內(nèi)容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization原有的問題
webpack 4.0 對(duì)代碼模塊的關(guān)系圖進(jìn)行了一些巨大的優(yōu)化,同時(shí)添加了一個(gè)新的 optimization 用于模塊的分離(可以看做是對(duì) CommonsChunkPlugin 的一次優(yōu)化)。
先讓我們看看舊版關(guān)系圖的一些缺陷。
在之前的版本中，我們將各個(gè)模塊打包進(jìn)編譯后的文件之中，同時(shí)這些文件之間又是通過父子關(guān)系來進(jìn)行關(guān)聯(lián),最后將我們整個(gè)項(xiàng)目中的所有模塊串聯(lián)起來。
當(dāng)其中一個(gè)文件含有父級(jí)引用，那我們可以推斷出，在該文件完成加載時(shí)，已經(jīng)成功加載了父級(jí)文件。那么我們可以據(jù)此進(jìn)行一些優(yōu)化。比如當(dāng)一個(gè)文件中的模塊已經(jīng)在父級(jí)文件中正常運(yùn)行，那么我們可以將該模塊從文件中移除，因?yàn)樗厝灰呀?jīng)被成功加載。
在入口點(diǎn)或異步拆分點(diǎn)處引用這些文件。這些文件將會(huì)并行加載。
這種類型的關(guān)系圖使得分離splitting變得非常困難。比如在你使用CommonsChunkPlugin插件時(shí)。會(huì)有一個(gè)或多個(gè)文件內(nèi)模塊被移動(dòng)到新的文件中來。這一整個(gè)新文件需要被添加到關(guān)系圖中來。但我們應(yīng)該如何設(shè)置它的層級(jí)呢？作為舊有文件的父級(jí)？還是子級(jí)？CommonsChunkPlugin中將其設(shè)置為父級(jí)，但從技術(shù)層面來說，這是錯(cuò)誤的，并且導(dǎo)致了一些負(fù)面的優(yōu)化結(jié)果(提前加載的這個(gè)文件中的部分模塊不是必需的)。
現(xiàn)在新的關(guān)系圖中，引入了一個(gè)新概念：ChunkGroup。包含文件列表的文件分組。
在入口點(diǎn)或異步拆分點(diǎn)處我們會(huì)引用這個(gè)文件分組，該分組內(nèi)的文件全都是并行加載。而一個(gè)文件可以被多個(gè)文件分組引用（但不會(huì)多次加載）。
現(xiàn)在不再使用父子級(jí)的關(guān)系來描述文件之間的聯(lián)系，取而代之的是文件分組ChunkGroup。
那么此時(shí)，splitting文件就能夠被表述出來。被創(chuàng)建的新文件可以被添加到所有包含原始文件的文件分組中。同時(shí)也不會(huì)因此產(chǎn)生負(fù)面優(yōu)化效果。
CommonsChunkPlugin和SplitChunksPlugin的區(qū)別這個(gè)問題被修復(fù)之后，我們可以更多的使用文件拆分了。我們可以將任何文件拆分出來并且不需要提高其加載優(yōu)先級(jí)。
CommonsChunkPlugin存在以下這些問題：
需要下載當(dāng)前還不需要使用的代碼文件。
異步加載使用文件效率低下。
很難使用。（猜測這里指的是配置）
實(shí)現(xiàn)方式很難理解。
所以新的插件誕生了：SplitChunksPlugin。
它會(huì)使用模塊引用計(jì)數(shù)和模塊類別區(qū)分(比如:node_modules)來自動(dòng)分離出需要被拆分的文件內(nèi)引用模塊。
There is a paradigm shift here. The CommonsChunkPlugin was like: “Create this chunk and move all modules matching minChunks into the new chunk”. The SplitChunksPlugin is like: “Here are the heuristics, make sure you fullfil them”. (imperative vs declarative)
這里沒有理解全部的內(nèi)容。
SplitChunksPlugin同時(shí)提供了更多的特性:
不會(huì)加載非必須文件（除非進(jìn)行了強(qiáng)制合并）
異步文件處理更有效率。
默認(rèn)異步處理文件。
它將引用模塊分散到多個(gè)庫文件中。
更容易使用。
不依賴文件引用關(guān)系圖。
更加的自動(dòng)化。
例子下面是一些使用SplitChunksPlugin的例子。這些用例僅僅展現(xiàn)了它在默認(rèn)配置下的行為。你也可以使用額外配置項(xiàng)來進(jìn)行個(gè)性化定制。
提示:
可以通過optimization.splitChunks進(jìn)行配置。這里的例子是關(guān)于文件的，默認(rèn)情況下僅適用于異步加載的文件塊。但也可以添加optimization.splitChunks.chunks: "all"來配置適用于所有類型的文件。
我們假定每個(gè)額外導(dǎo)入的庫文件都大于30kb，因?yàn)閮?yōu)化僅在該體積之后開始進(jìn)行。（可以通過配置minSize屬性進(jìn)行修改，默認(rèn) 30000)
Vendorschunk-a: react, react-dom, some components
chunk-b: react, react-dom, some other components
chunk-c: angular, some components
chunk-d: angular, some other components
webpack將會(huì)自動(dòng)創(chuàng)建2個(gè)庫文件:
vendors~chunk-a~chunk-b: react, react-dom
vendors~chunk-c~chunk-d: angular
chunk-a chunk-b chunk-c chunk-d: 僅含有components
Vendors overlappingchunk-a: react, react-dom, some components
chunk-b: react, react-dom, lodash, some other components
chunk-c: react, react-dom, lodash, some components
webpack依然會(huì)創(chuàng)建2個(gè)庫文件:
vendors~chunk-a~chunk-b~chunk-c: react, react-dom
vendors~chunk-b~chunk-c: lodash
chunk-a chunk-b chunk-c: 僅含有components
Shared moduleschunk-a: vue, some components, some shared components
chunk-b: vue, some other components, some shared components
chunk-c: vue, some more components, some shared components
假設(shè)所有的shared components體積都大于 30kb,webpack將會(huì)創(chuàng)建一個(gè)庫文件和一個(gè)通用組件文件:
vendors~chunk-a~chunk-b~chunk-c: vue
commons~chunk-a~chunk-b~chunk-c: some shared components
chunk-a chunk-b chunk-c: 僅含有components
當(dāng)這些shared components體積小于30kb是，webpack會(huì)故意將該模塊復(fù)制到chunk-a chunk-b chunk-c三個(gè)文件中。我們認(rèn)為進(jìn)行分離所減小的加載體積的整體效果并不如一次額外的加載請求的消耗。
Multiple shared moduleschunk-a: react, react-dom, some components, some shared react components
chunk-b: react, react-dom, angular, some other components
chunk-c: react, react-dom, angular, some components, some shared react components, some shared angular components
chunk-d: angular, some other components, some shared angular components
webpack將會(huì)創(chuàng)建2個(gè)庫文件及2個(gè)通用組件文件
vendors~chunk-a~chunk-b~chunk-c: react, react-dom
vendors~chunk-b~chunk-c~chunk-d: angular
commons~chunk-a~chunk-c: some shared react components
commons~chunk-c~chunk-d: some shared angular components
chunk-a chunk-b chunk-c chunk-d: Only the components
提示：因?yàn)樯傻膶?dǎo)入文件名稱包含所有的原始文件名稱，所以我們推薦在生產(chǎn)環(huán)境中使用的長效緩存文件不要包含[name]在文件名中，或者設(shè)置optimization.splitChunks.name: false來關(guān)閉文件名生成邏輯。這樣即使在后續(xù)開發(fā)中對(duì)該文件添加了新的引用，也不會(huì)修改文件名，該緩存邏輯依然生效。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101351.html
摘要：本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個(gè)在中，本身和它的是在同一個(gè)包中，中將兩個(gè)分開管理。我記錄下自己更新這個(gè)的過程，以下前半部分可以直接跳過。以下記錄踩坑過程。 本篇不包含所有坑，暫時(shí)只記錄自己踩到的部分坑 一.安裝 安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...
摘要：在尋找相對(duì)路徑的文件時(shí)會(huì)以為根目錄，默認(rèn)為執(zhí)行啟動(dòng)時(shí)所在的當(dāng)前目錄。在文件被添加到依賴圖中時(shí)，將其轉(zhuǎn)換稱為了模塊。配置中的兩個(gè)目標(biāo)。僅限高級(jí)用途，默認(rèn)情況下自動(dòng)生成生成文件的文件名。webpack webpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒有所有的寫，只是把之前遇到的問題記錄了一下。 本文的原文在我的博客中：github.com...
摘要：之輸出的最后就是為了得到打包結(jié)果。在這里可以看到很多相似，但是有不同含義的名次，如和，和，那他們有什么區(qū)別呢而這里的又是什么意思呢將多個(gè)模塊打包之后的代碼集合稱為。在這樣打包的話，會(huì)報(bào)錯(cuò)。所以就想搞明白這兩個(gè)的區(qū)別到底是什么。webpack之輸出 webpack的最后就是為了得到打包結(jié)果。 那這是一個(gè)怎么樣的過程，不同的配置，會(huì)有什么樣的結(jié)果呢？ 本文的原文在我的博客中:github.com...
摘要：續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說完了本地測試和是如何工作，接下來分析構(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ì)被選中。使用來命名文件，實(shí)現(xiàn)文件緩存的功能。當(dāng)文件內(nèi)容發(fā)生變化，文件名會(huì)隨之改變。代碼中再次使用了，從中提取出了名為的運(yùn)行時(shí)代碼。 CommonsChunkPlugin配置簡介 最近讀了一下webpack的文檔，讀到CommonsChunkPlugin這個(gè)插件，深深折服于webpack的強(qiáng)大...
閱讀 3766·2023-04-25 22:43
閱讀 3766·2021-09-06 15:15
閱讀 1359·2019-08-30 15:54
閱讀 3638·2019-08-30 14:20
閱讀 2918·2019-08-29 17:16
閱讀 3155·2019-08-29 15:28
閱讀 3427·2019-08-29 11:08
閱讀 1102·2019-08-28 18:05
