摘要：代碼均放在倉(cāng)庫(kù)給我們帶來(lái)了一些改變。插件以前使用允許我們將公共依賴項(xiàng)提取到現(xiàn)有的或全新的代碼塊中。代碼詳情見(jiàn)文章開(kāi)頭倉(cāng)庫(kù)。這才是配置的關(guān)鍵緩存組會(huì)繼承的配置，但是和只能用于配置緩存組。可以通過(guò)禁用緩存組。

代碼均放在git倉(cāng)庫(kù)

Webpack 4給我們帶來(lái)了一些改變。包括更快的打包速度，引入了SplitChunksPlugin插件來(lái)取代（之前版本里的）CommonsChunksPlugin插件。在這篇文章中，你將學(xué)習(xí)如何分割你的輸出代碼，從而提升我們應(yīng)用的性能。

SplitChunks插件(webpack 4.x以前使用CommonsChunkPlugin)允許我們將公共依賴項(xiàng)提取到現(xiàn)有的entry chunk或全新的代碼塊中。

首先搞明白： webpack里的代碼分割是個(gè)什么鬼？ 它允許你將一個(gè)文件分割成多個(gè)文件。如果使用的好，它能大幅提升你的應(yīng)用的性能。其原因是基于瀏覽器會(huì)緩存你的代碼這一事實(shí)。每當(dāng)你對(duì)某一文件做點(diǎn)改變，訪問(wèn)你站點(diǎn)的人們就要重新下載它。然而依賴卻很少變動(dòng)。如果你將（這些依賴）分離成多帶帶的文件，訪問(wèn)者就無(wú)需多次重復(fù)下載它們了。

使用webpack生成一個(gè)或多個(gè)包含你源代碼最終版本的“打包好的文件”（bundles），（概念上我們當(dāng)作）它們由（一個(gè)一個(gè)的）chunks組成。

首先 webpack 總共提供了三種辦法來(lái)實(shí)現(xiàn) Code Splitting，如下：

入口配置：entry 入口使用多個(gè)入口文件；

抽取公有代碼：使用 SplitChunks 抽取公有代碼；

動(dòng)態(tài)加載 ：動(dòng)態(tài)加載一些代碼。

這里我們姑且只討論使用 SplitChunks 抽取公有代碼。

在src目錄下創(chuàng)建三個(gè)文件pageA.js、pageB.js和pageC.js。代碼詳情見(jiàn)文章開(kāi)頭git倉(cāng)庫(kù)。

// src/pageA.js
var react = require("react");
var reactDom = require("react-dom");
var utility1 = require("../utils/utility1");
var utility2 = require("../utils/utility2");
new Vue();

module.exports = "pageA";

// src/pageB.js
var react = require("react");
var reactDom = require("react-dom");
var utility2 = require("../utils/utility2");
var utility3 = require("../utils/utility3");

module.exports = "pageB";

// src/pageC.js
var react = require("react");
var reactDom = require("react-dom");
var utility2 = require("../utils/utility2");
var utility3 = require("../utils/utility3");

module.exports = "pageC";

入口文件 && 出口文件

entry: {
    pageA: "./src/pageA",    // 引用utility1.js  utility2.js
    pageB: "./src/pageB",    // 引用utility2.js  utility3.js
    pageC: "./src/pageC",   // 引用utility2.js  utility3.js
},
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].[hash:8].bundle.js"
},

首先我們配置optimization如下：

optimization: {
    splitChunks: {
      chunks: "all",
  },

執(zhí)行npm run build打包命令之后，查看dist目錄

可以發(fā)現(xiàn)，打包出來(lái)的除了三個(gè)page文件，還存在一個(gè)vendors~pageA~pageB~pageC.[hash].bundle.js文件（此文件中保存了pageA、pageB、pageC和node_modules中共有的size大于30KB的文件）。事實(shí)上這全靠了配置中本身默認(rèn)固有一個(gè)cacheGroups的配置項(xiàng)：

splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[/]node_modules[/]/,  // 匹配node_modules目錄下的文件
        priority: -10   // 優(yōu)先級(jí)配置項(xiàng)
      },
      default: {
        minChunks: 2,
        priority: -20,   // 優(yōu)先級(jí)配置項(xiàng)
        reuseExistingChunk: true
      }
    }
  }

在默認(rèn)設(shè)置中，會(huì)將 node_mudules 文件夾中的模塊打包進(jìn)一個(gè)叫 vendors的bundle中，所有引用超過(guò)兩次的模塊分配到 default bundle 中。更可以通過(guò) priority 來(lái)設(shè)置優(yōu)先級(jí)。

參數(shù)說(shuō)明如下：

chunks：表示從哪些chunks里面抽取代碼，除了三個(gè)可選字符串值 initial、async、all 之外，還可以通過(guò)函數(shù)來(lái)過(guò)濾所需的 chunks；

minSize：表示抽取出來(lái)的文件在壓縮前的最小大小，默認(rèn)為 30000；

maxSize：表示抽取出來(lái)的文件在壓縮前的最大大小，默認(rèn)為 0，表示不限制最大大??；

minChunks：表示被引用次數(shù)，默認(rèn)為1；上述配置commons中minChunks為2，表示將被多次引用的代碼抽離成commons。

值得注意的是，如果沒(méi)有修改minSize屬性的話，而且被公用的代碼（假設(shè)是utilities.js）size小于30KB的話，它就不會(huì)分割成一個(gè)多帶帶的文件。在真實(shí)情形下，這是合理的，因?yàn)椋ㄈ绶指睿┎⒉荒軒?lái)性能確實(shí)的提升，反而使得瀏覽器多了一次對(duì)utilities.js的請(qǐng)求，而這個(gè)utilities.js又是如此之小（不劃算）。

maxAsyncRequests：最大的按需(異步)加載次數(shù)，默認(rèn)為 5；

maxInitialRequests：最大的初始化加載次數(shù)，默認(rèn)為 3；

automaticNameDelimiter：抽取出來(lái)的文件的自動(dòng)生成名字的分割符，默認(rèn)為 ~；

name：抽取出來(lái)文件的名字，默認(rèn)為 true，表示自動(dòng)生成文件名；

cacheGroups: 緩存組。（這才是配置的關(guān)鍵）

緩存組會(huì)繼承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置緩存組。cacheGroups是一個(gè)對(duì)象，按上述介紹的鍵值對(duì)方式來(lái)配置即可，值代表對(duì)應(yīng)的選項(xiàng)。除此之外，所有上面列出的選擇都是可以用在緩存組里的：chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests, name?？梢酝ㄟ^(guò)optimization.splitChunks.cacheGroups.default: false禁用default緩存組。默認(rèn)緩存組的優(yōu)先級(jí)(priotity)是負(fù)數(shù)，因此所有自定義緩存組都可以有比它更高優(yōu)先級(jí)（譯注：更高優(yōu)先級(jí)的緩存組可以優(yōu)先打包所選擇的模塊）（默認(rèn)自定義緩存組優(yōu)先級(jí)為0）

現(xiàn)在我們?cè)僦匦聛?lái)看一下pageA、pageB、pageC三個(gè)js文件，這三個(gè)文件中都引入了utility2.js文件，但是此文件size很明顯小于30KB，所以這部分公用代碼并沒(méi)有分割出來(lái)。如果想要分割出來(lái)很簡(jiǎn)單，只需要：

optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0
  },

執(zhí)行npm run build打包命令之后，查看dist目錄

顯然多了一個(gè)pageA~pageB~pageC.[hash].bundle.js文件。查看文件可得知此文件中存儲(chǔ)了utility2.js中的代碼。如下圖所示（借助于webpack-bundle-analyzer插件，詳情文章末尾附錄）。

上圖可以看出，React相關(guān)代碼均放在了vendors~pageA~pageB~pageC.[hash].bundle.js文件中，如果我們想要抽離出React代碼，應(yīng)該怎么做吶？

splitChunks: {
      chunks: "all",
      cacheGroups: {
        commons: {
          chunks: "initial",
          minChunks: 2,
          name: "commons",
          maxInitialRequests: 5,
          minSize: 0, // 默認(rèn)是30kb，minSize設(shè)置為0之后
                            // 多次引用的utility1.js和utility2.js會(huì)被壓縮到commons中
        },
        reactBase: {
          test: (module) => {
            return /react|redux|prop-types/.test(module.context);
          }, // 直接使用 test 來(lái)做路徑匹配，抽離react相關(guān)代碼
          chunks: "initial",
          name: "reactBase",
          priority: 10,
        }
      }
    },

run build之后如下圖所示。

看似非常完美，但是reactBase文件中竟然包含了node_modules，神奇的問(wèn)題？室友都睡覺(jué)了，這鍵盤聲影響不好，明天接著看。

我們?cè)侔惭b一個(gè) webpack-bundle-analyzer，這個(gè)插件會(huì)清晰的展示出打包后的各個(gè)bundle所依賴的模塊：

npm i webpack-bundle-analyzer -D

引入：

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

使用，在plugins數(shù)組中添加即可：

new BundleAnalyzerPlugin()