理解webpack中SplitChunksPlugin的做用

SplitChunksPlugin

在講這個插件前，跟你們區分下chunk和bundle的概念，

    -- chunk理解爲「代碼塊」，例如node_module下的module，或者你本身import入頁面的自定義js。

    -- bundle理解則可理解爲已打包好的代碼包，而代碼包就是由不少chunk組成的了，就像vue-cli中build後會輸出一個vender.js，這個js就是代碼包了

開始：

    Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible 

    譯文：chunks(「代碼塊們」)和引入進去組成「代碼塊」的module們，它們之間的引用聯繫是經過webpack生成的父子關係圖，而CommonsChunkPlugin 能夠用來解決它們交叉或者重複調用的關係，但想進一步優化就顯得很差搞了。因此webpack v4開始，就開始棄用了CommonsChunkPlugin

特色

    觸發這個splitChunksPlugin切割代碼的有如下幾點：

    1.共用的module (node_module文件夾的那些模塊)和公共的chunk

    2.輸出的chunk體積大於30kb的（指尚未gz和min喔）

    3.當加載請求數要求最大並行數小於或等於5時

    4.初始化頁面，加載請求數要求最大並行請求要小於或等於3時

    ps：想要知足第3和第4點，體積越大的代碼塊越容易

配置：

    據官方介紹，通常使用默認配置就能知足大部分的開發者了，若是你想針對你本身的網站進行優化，也能夠自定義的。

    看下面的配置項，就是默認的配置項了

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: 10
        },
        default: {
          minChunks: 2,
          priority: 20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

    chunks：

        這個屬性的可取值：all | async | initial

        all：entry入口全部的文件（不論是異步仍是同步引入的）都會抽離出公共的，好處是文件會小且公共的文件只會加載一次，很差的地方是這個公共包有可能會很大。

        async：只抽離屬於動態引入的文件。

        initial：只從入口模塊進行拆分

    minSize：

        打包出來的chunks最小的size，單位是bytes ---- 1024bytes = 1kb

    maxSize：

        限制打包出來最大的size，這個是限制包的大小，切割包的優先級是最高的maxInitialRequest/maxAsyncRequests < maxSize < minSize，若是設置了這個最大size，其它一些的分包條件將不會起做用，由於這個maxSize的優先級高，因此像cacheGroups下的切分條件若是和maxSize的有衝突，會以maxSize爲準   

    maxAsyncRequests：

        最大的動態異步文件請求數，首先要了解，什麼是異步文件請求呢？使用import('xxxx/xxxx/xx.js').then()引入的模塊，都是屬於異步的，這裏要區分一下import 'xx' from 'xxx/xx.js'語句,這個是同步靜態引入的。maxAsyncRequests該屬性的做用就是限制異步文件進行切分後的請求數，以下圖

        

    maxInitialRequests：

        這是用來限制入口的拆分數量

    automaticNameDelimiter：

        默認狀況下，webpack將使用塊的名稱和名稱生成名稱（例如vendors~main.js），此選項容許您指定用於生成的名稱的分隔符

    name:

        該屬性值爲true時，生成的

 

    cacheGroups:

        這個屬性能夠說是切分代碼的核心屬性了，該屬性下每一個鍵值對屬性對象都是一個切分的配置項，每一個配置能夠頂掉上面所說那些屬性如miniSize等，因爲屬性不少，你們能夠看官方的介紹，我挑幾個經常使用的來講下。

cacheGroups: {
    vendors: {
    minChunks:2,
    chunks: 'initial',
    test: /[\\/]node_modules[\\/]/,
    priority: -10，
    filename: '[name].bundle.js',
    enforce: ''
},
    default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
    }
}

一、vendors，default是切分後代碼塊的命名，若是cacheGroups下面一個塊名都沒，切分出來的代碼塊仍是有這兩個的，是默認的。

二、test屬性是指符合這個屬性下設置的條件纔會切分到這個塊，上面是正則表達式，也能夠是一個函數 
    test(module, chunks) {
        return module.type === 'javascript/auto';
    }

三、priority屬性是設置切分優先級，假若有一個文件同時符合兩個塊的切分條件，那就是誰的priority值大，誰話事

四、filename屬性是用來設置塊的名稱，值是'[name].bundle.js'這種

五、chunks和miniChunks和上面講的做用同樣，在這裏設置的話，能夠頂掉上面設置的

六、enforce屬性就是強制切分到這個塊，能夠不受上面什麼miniSize等的控制

七、reuseExistingChunk屬性是重用切分的包，不切新的

總結：

學會一些webpack的經常使用配置，在項目中也不會至於對模塊化和打包的機制一臉盲，特別如今的框架都須要打包工具打包生成代碼，本身想要一些自定義化的打包，也仍是能動手搗騰一下出來。

ps：這篇文章雖然很簡單，但因爲我不太有寫博客的習慣，因此寫寫停停，寫了很久(手動捂臉)，主要目的仍是寫篇文章來記錄下本身對這些基礎屬性的認識。