Webpack 4.0 CommonsChunkPlugin 和 optimization spli

Caizhenhao 發布于2019-08-23 14:55 / 501人閱讀

摘要：可以通過配置屬性進行修改，默認將會自動創建個庫文件僅含有依然會創建個庫文件僅含有假設所有的體積都大于將會創建一個庫文件和一個通用組件文件僅含有當這些體積小于是，會故意將該模塊復制到三個文件中。

該文章內容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization

原有的問題

webpack 4.0 對代碼模塊的關系圖進行了一些巨大的優化,同時添加了一個新的 optimization 用于模塊的分離(可以看做是對 CommonsChunkPlugin 的一次優化)。

先讓我們看看舊版關系圖的一些缺陷。

在之前的版本中，我們將各個模塊打包進編譯后的文件之中，同時這些文件之間又是通過父子關系來進行關聯,最后將我們整個項目中的所有模塊串聯起來。

當其中一個文件含有父級引用，那我們可以推斷出，在該文件完成加載時，已經成功加載了父級文件。那么我們可以據此進行一些優化。比如當一個文件中的模塊已經在父級文件中正常運行，那么我們可以將該模塊從文件中移除，因為它必然已經被成功加載。

在入口點或異步拆分點處引用這些文件。這些文件將會并行加載。

這種類型的關系圖使得分離splitting變得非常困難。比如在你使用CommonsChunkPlugin插件時。會有一個或多個文件內模塊被移動到新的文件中來。這一整個新文件需要被添加到關系圖中來。但我們應該如何設置它的層級呢？作為舊有文件的父級？還是子級？CommonsChunkPlugin中將其設置為父級，但從技術層面來說，這是錯誤的，并且導致了一些負面的優化結果(提前加載的這個文件中的部分模塊不是必需的)。

現在新的關系圖中，引入了一個新概念：ChunkGroup。包含文件列表的文件分組。

在入口點或異步拆分點處我們會引用這個文件分組，該分組內的文件全都是并行加載。而一個文件可以被多個文件分組引用（但不會多次加載）。

現在不再使用父子級的關系來描述文件之間的聯系，取而代之的是文件分組ChunkGroup。

那么此時，splitting文件就能夠被表述出來。被創建的新文件可以被添加到所有包含原始文件的文件分組中。同時也不會因此產生負面優化效果。

CommonsChunkPlugin和SplitChunksPlugin的區別

這個問題被修復之后，我們可以更多的使用文件拆分了。我們可以將任何文件拆分出來并且不需要提高其加載優先級。

CommonsChunkPlugin存在以下這些問題：

需要下載當前還不需要使用的代碼文件。

異步加載使用文件效率低下。

很難使用。（猜測這里指的是配置）

實現方式很難理解。

所以新的插件誕生了：SplitChunksPlugin。

它會使用模塊引用計數和模塊類別區分(比如:node_modules)來自動分離出需要被拆分的文件內引用模塊。

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)
這里沒有理解全部的內容。

SplitChunksPlugin同時提供了更多的特性:

不會加載非必須文件（除非進行了強制合并）

異步文件處理更有效率。

默認異步處理文件。

它將引用模塊分散到多個庫文件中。

更容易使用。

不依賴文件引用關系圖。

更加的自動化。

例子

下面是一些使用SplitChunksPlugin的例子。這些用例僅僅展現了它在默認配置下的行為。你也可以使用額外配置項來進行個性化定制。

提示:

可以通過optimization.splitChunks進行配置。這里的例子是關于文件的，默認情況下僅適用于異步加載的文件塊。但也可以添加optimization.splitChunks.chunks: "all"來配置適用于所有類型的文件。

我們假定每個額外導入的庫文件都大于30kb，因為優化僅在該體積之后開始進行。（可以通過配置minSize屬性進行修改，默認 30000)

Vendors

chunk-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將會自動創建2個庫文件:

vendors~chunk-a~chunk-b: react, react-dom

vendors~chunk-c~chunk-d: angular

chunk-a chunk-b chunk-c chunk-d: 僅含有components

Vendors overlapping

chunk-a: react, react-dom, some components

chunk-b: react, react-dom, lodash, some other components

chunk-c: react, react-dom, lodash, some components

webpack依然會創建2個庫文件:

vendors~chunk-a~chunk-b~chunk-c: react, react-dom

vendors~chunk-b~chunk-c: lodash

chunk-a chunk-b chunk-c: 僅含有components

Shared modules

chunk-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

假設所有的shared components體積都大于 30kb,webpack將會創建一個庫文件和一個通用組件文件:

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

當這些shared components體積小于30kb是，webpack會故意將該模塊復制到chunk-a chunk-b chunk-c三個文件中。我們認為進行分離所減小的加載體積的整體效果并不如一次額外的加載請求的消耗。

Multiple shared modules

chunk-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將會創建2個庫文件及2個通用組件文件

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

提示：因為生成的導入文件名稱包含所有的原始文件名稱，所以我們推薦在生產環境中使用的長效緩存文件不要包含[name]在文件名中，或者設置optimization.splitChunks.name: false來關閉文件名生成邏輯。這樣即使在后續開發中對該文件添加了新的引用，也不會修改文件名，該緩存邏輯依然生效。

云服務器 GPU云服務器 CommonsChunkPlugin Optimizer optimize Optimization

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101351.html

webpack3 升級 webpack4踩坑記錄

摘要：本篇不包含所有坑，暫時只記錄自己踩到的部分坑一安裝安裝最新版本安裝新增依賴這個在中，本身和它的是在同一個包中，中將兩個分開管理。我記錄下自己更新這個的過程，以下前半部分可以直接跳過。以下記錄踩坑過程。本篇不包含所有坑，暫時只記錄自己踩到的部分坑一.安裝安裝webpack4最新版本 npm install --save-dev webpack@4 安裝新增依賴 webpack-c...

馬忠志 2019-08-02 15:38 評論0 收藏0
Webpack的坑位整理

摘要：在尋找相對路徑的文件時會以為根目錄，默認為執行啟動時所在的當前目錄。在文件被添加到依賴圖中時，將其轉換稱為了模塊。配置中的兩個目標。僅限高級用途，默認情況下自動生成生成文件的文件名。webpack webpack現在是主要的打包工具了，現在網絡上也有很多資料可以學習了。這里主要整理了一些基礎概念，但沒有所有的寫，只是把之前遇到的問題記錄了一下。本文的原文在我的博客中：github.com...

lidashuang 2019-05-23 17:34 評論0 收藏0
Webpack坑位之輸出

摘要：之輸出的最后就是為了得到打包結果。在這里可以看到很多相似，但是有不同含義的名次，如和，和，那他們有什么區別呢而這里的又是什么意思呢將多個模塊打包之后的代碼集合稱為。在這樣打包的話，會報錯。所以就想搞明白這兩個的區別到底是什么。webpack之輸出 webpack的最后就是為了得到打包結果。那這是一個怎么樣的過程，不同的配置，會有什么樣的結果呢？本文的原文在我的博客中:github.com...

miqt 2019-05-22 19:25 評論0 收藏0
前端臨床手札——webpack構建逐步解構（下）

摘要：續前端臨床手札構建逐步解構上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細可以看分支構建生產上一篇說完了本地測試和是如何工作，接下來分析構建生產模式下配置如何配置和每個模塊干了什么。續前端臨床手札——webpack構建逐步解構（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 評論0 收藏0
Webpack CommonsChunkPlugin 理解

摘要：未定義時使用作為文件名。表示公共創建所需要的所有模塊的最小體積。如果設置為，公共的所有子模塊將會被選中。使用來命名文件，實現文件緩存的功能。當文件內容發生變化，文件名會隨之改變。代碼中再次使用了，從中提取出了名為的運行時代碼。 CommonsChunkPlugin配置簡介最近讀了一下webpack的文檔，讀到CommonsChunkPlugin這個插件，深深折服于webpack的強大...

YJNldm 2019-08-21 17:00 評論0 收藏0