Webpack CommonsChunkPlugin 理解

YJNldm 發布于2019-08-21 17:00 / 3523人閱讀

摘要：未定義時使用作為文件名。表示公共創建所需要的所有模塊的最小體積。如果設置為，公共的所有子模塊將會被選中。使用來命名文件，實現文件緩存的功能。當文件內容發生變化，文件名會隨之改變。代碼中再次使用了，從中提取出了名為的運行時代碼。

CommonsChunkPlugin配置簡介

最近讀了一下webpack的文檔，讀到CommonsChunkPlugin這個插件，深深折服于webpack的強大，同時也產生了一些自己的疑問。

首先，CommonsChunkPlugin這個插件是用來提取公共代碼的，通過將公共模塊提取出來，只在頁面加載的時候引入一次，提升應用的加載效率。

順便提一下，chunk其實就是代碼塊的意思，可能是一個或多個模塊，一般提取后就是一個js文件。

CommonsChunkPlugin有中文翻譯的文檔，但是感覺并不是很通順，英文文檔看完也有一些疑惑，比如minChunks到底是做什么用的，怎么用？chunks是什么？

配置項

首先貼一下文檔。

{
  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的名稱，如果這個chunk已經在entry中定義，該chunk會被直接提取；如果沒有定義，則生成一個空的chunk來提取其他所有chunk的公共代碼。

filename：可以指定提取出的公共代碼的文件名稱，可以使用output配置項中文件名的占位符。未定義時使用name作為文件名。

chunks：可以指定要提取公共模塊的源chunks，指定的chunk必須是公共chunk的子模塊，如果沒有指定則使用所有entry中定義的入口chunk。

minChunks：在一個模塊被提取到公共chunk之前，它必須被最少minChunks個chunk所包含（通俗的說就是一個模塊至少要被minChunks個模塊所引用，才能被提取到公共模塊。）。minChunks參數有三點需要說明：

該數字必須不小于2或者不大于chunks的個數。默認值等于chunks的個數。

如果指定了Infinity，則創建一個公共chunk，但是不包含任何模塊，內部是一些webpack生成的runtime代碼和chunk自身包含的模塊（如果chunk存在的話）。

用戶也可以定制自己的邏輯去生成代碼。

minSize：表示公共chunk創建所需要的所有模塊的最小體積。

async：如果設置為true，一個異步的公共chunk將會作為options.name的子塊和options.chunks的兄弟塊被創建。該chunk會與options.chunks并行加載。你也可以使用該參數指定輸出的文件名。

children：如果設置為true，公共chunk的所有子模塊將會被選中。

例子

我們看一個簡單的例子。

module.exports = {
    entry: {
        app: "./src/index.js",
        vender: [
            "lodash",
            "otherlib"
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vender"
        })
    ],
    output: {
        // 使用Hash來命名文件，實現文件緩存的功能。當文件內容發生變化，文件名會隨之改變。
        filename: "[name].[chunkhash].js", 
        path: path.resolve(__dirname, "dist")
    }
};

上面的代碼中定義了兩個入口，app和vender（公共庫），plugins中使用CommonsChunkPlugin提取vender。

vender是我們提取出來的公共chunk，通常不會被修改，所以理應在每次編譯后文件名保持一致。然而，我們嘗試修改入口文件index.js會發現，vender的文件名會發生變化。

原因呢上面提到過，由于每次編譯會導致vender的module.id發生變化，內部的runtime代碼隨之發生改變。

解決方案有以下幾種：

使用NamedModulesPlugin插件，用文件路徑而非默認的數字ID來作為模塊標識。

使用HashedModuleIdsPlugin插件，用相對路徑的Hash值來作為模塊標識。推薦在生產環境中使用。

將runtime部分的代碼提取到一個多帶帶的文件中，代碼如下。

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的運行時代碼。

分析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配置項有兩個參數，module為當前要提取的源chunk中所包含的模塊，count表示模塊的個數。
自定義函數會被循環調用，直到遍歷完所有模塊。

module.resource為模塊的絕對路徑，所以這段代碼判斷了模塊是否在node_modules下，是的話則打包到vender中。

后面一個CommonsChunkPlugin從vender中提取了運行時代碼，避免每次打包vender的Hash值都發生變化導致緩存無效。

如有問題，歡迎指正。

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

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

Webpack 4.0 CommonsChunkPlugin 和 optimization spli

摘要：可以通過配置屬性進行修改，默認將會自動創建個庫文件僅含有依然會創建個庫文件僅含有假設所有的體積都大于將會創建一個庫文件和一個通用組件文件僅含有當這些體積小于是，會故意將該模塊復制到三個文件中。該文章內容大致翻譯自 webpack 4: Code Splitting, chunk graph and the splitChunks optimization 原有的問題 webpack...

Caizhenhao 2019-08-23 14:55 評論0 收藏0
從零開始的webpack生活-0x007：CommonsChunkPlugin基本用法

摘要：概述上一章講的是，和這一章依舊沒有絲毫關系，這一章講的是說實在的，這個插件略復雜，我還沒完全搞懂，大概是還沒到那么深我就已經選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個包當然還有許多更加復雜的用法，還請看關于章節資源源代碼 0x001 概述上一章講的是providerPlugin，和這一章依舊沒有絲毫關系，這一章講的是CommonsChunkPlugin,說實在的，這...

Sleepy 2019-08-21 17:28 評論0 收藏0
前端臨床手札——webpack構建逐步解構（下）

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

TerryCai 2019-08-22 10:37 評論0 收藏0
webpack.optimize.CommonsChunkPlugin的minChunks解析

摘要：，顧名思義，是用來把公用模塊打包到一起的插件，以減小打包后文件的體積。令人迷惑的中文社區和官網都對此屬性語焉不詳。官網的解釋我實在看不懂在被放到共同之前需要包含模塊的的最小數量。當大于等于設定的值時，該模塊就會被打包到公用包中。 CommonsChunkPlugin，顧名思義，是用來把公用模塊打包到一起的插件，以減小打包后js文件的體積。令人迷惑的minChunks 中文社區和官網...

lavor 2019-08-26 11:42 評論0 收藏0
webpack：從指定入口文件中提取公共文件

摘要：通過函數，指定三個入口文件為，同時我們還要設置為，表示指定三個入口文件中提取出的公共文件，最少要被三個不同的入口文件引用。所以就是從三個入口文件中提取公共的文件。從兩個公共文件中，再提取公共部分先說一下，這是什么意思有個公共文件。在不明白CommonsChunkPlugin的使用情況下，直接上手webpack4的splitChunks，實在是難上加難。為了能更好的理解splitChu...

tuomao 2019-08-23 13:07 評論0 收藏0