webpack學習之路（九）SplitChunksPlugin配置

webapck v4開始，移除了CommonsChunkPlugin，轉而使用SplitChunksPlugin做爲新的代碼塊分割插件。

CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，優化加載。SplitChunksPlugin一樣也是這個做用。

SplitChunksPlugin是開箱即用的，這對大多數開發者來講很是友好。

拆分條件

webpack將根據如下條件自動拆分塊：

• 能夠共享的模塊或來自node_modules文件夾的模塊
• 超過30kb的塊（在min + gz以前）
• 根據須要加載塊時的並行請求數<=5
• 初始頁面加載時的最大並行請求數<=3

參數列表

SplitChunksPlugin的參數是很是多的

optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
}
複製代碼

• chunks: 打包的模塊是異步、同步、仍是所有，對應的值爲async initial all，也能夠寫成函數形式，自定義打包
• minSize: 抽離公共包的最小size
• maxSize: 最大size
• minChunks: 最少使用次數
• maxAsyncRequests: 最大異步請求數
• maxInitialRequests: 最大同步請求數
• automaticNameDelimiter: 默認狀況下，webpack將使用塊的名稱和原始文件名稱生成文件名（例如vendors~main.js）。此選項容許您指定用於生成的名稱的分隔符。
• automaticNameMaxLength: 容許設置由SplitChunksPlugin生成的塊的名稱字符的最大值
• maxAsyncRequests: 按需加載時最大並行請求數
• maxAsyncRequests: 入口處最大請求並行數
• name: 生成塊的名稱，爲true時，將根據塊和緩存組密鑰自動生成名稱
• cacheGroups: 緩存組能夠繼承或者覆蓋上面的選項，可是priority test reuseExistingChunk 只能在這裏設置。若是不想使用緩存組，能夠直接置爲false
  • priority: 表示緩存的優先級；
  • test: 緩存組的規則，表示符合條件的的放入當前緩存組，值能夠是function、boolean、string、RegExp，默認爲空；
  • reuseExistingChunk: 表示可使用已經存在的塊，即若是知足條件的塊已經存在就使用已有的，再也不建立一個新的塊。

示例

1.默認打包chunks: async

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'initial'
    }
}
複製代碼

a.js

import 'react'
複製代碼

b.js

import(/* webpackChunkName: "async-lodash" */ 'lodash')
import 'react-dom'
複製代碼

咱們 a.js同步引入了 react，在 b.js同步引入了 react-dom，異步引入了 lodash打包以後咱們能夠發現，同步引入原封不動都被打包到了 main.js，而異步引入的 lodash被單獨獨立成了一個模塊。

因此SplitChunksPlugin的默認打包是異步打包。

2.chunks: initial

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'initial',
        filename: 'vendor.js'
    }
}
複製代碼

依然是上面文件

打包以後咱們能夠發現， react和 react-dom都單獨打包進了 vendor.js。異步依然是單獨打包優化。

initial這個選項就是將全部來自node_modules的模塊分配到一個叫vendors的緩存組。

3.chunks: all

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all'
    }
}
複製代碼

all這個選項也會將全部來自node_modules的模塊分配到一個叫vendors的緩存組。

這就很尷尬了，兩個選項打包出來同樣，不甚理解根本區別在哪？請精通的大佬賜教~

4.minChunks webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all',
        minChunks: 2
    }
}
複製代碼

a.js

import 'react'
複製代碼

b.js

import './a'
複製代碼

由於只被調用了一次，不符合要求，因此react並無單獨打包成文件

5.cacheGroup

webpack.config.js

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            test: /lodash/
          }
    }
}
複製代碼

a.js

import 'lodash'
複製代碼

b.js

import 'react'
複製代碼

由於test只匹配了lodash，因此react並無抽離出來。

---

連接文章

webpack學習之路（八）壓縮代碼

webpack學習之路（七）source map

webpack學習之路（六）hash/chunkHash/contentHash

webpack學習之路（五）loader初識及經常使用loader介紹

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（二）webpack-dev-server實現熱更新

webpack學習之路（一）基礎配置

I am moving forward.