webpack4.x版本splitChunksPlugin的配置項詳解與實際應用場景

在工程化地使用webpack時，公共代碼抽離是不可或缺的，4.x版本以後，commonsChunkPlugin已經被去掉，splitChunksPlugins登上舞臺，而且優化了不少配置選項，具體可見官方文檔，這裏不作過多說明。

在使用splitChunksPlugins以前，首先要知道splitChunksPlugins是webpack主模塊中的一個細分模塊，無需npm引入。功能上，splitChunksPlugins只能用於如何抽離公用的代碼，也就是抽離公用代碼的規則，要記住，除了這個功能以外，splitChunksPlugins再無其餘功能（明白這點很重要，至少我本身在這點上被坑到過）。

首先先說每一個配置項的做用：

*在此說明下， 下文中說到的塊即chunks，也就是js文件

1.  minSize 

 分離前的最小塊文件大小，單位爲字節

2. minChunks

分離前，該塊被引入的次數

3.maxInitialRequests

一個入口文件能夠並行加載的最大文件數量

4.maxAsyncRequests

內層文件（第二層）按需加載時最大的並行加載數量

5.name

用以控制分離後代碼塊的命名，當存在匹配的緩存組（後面會說到）時，命名使用緩存組中的name值，若不存在則爲  [來源]~[入口的key值].js  的格式

6.automaticNameDelimiter

修改上文中的 「~」 ,  若改成： 「-」 則分離後的js默認命名規則爲 [來源]-[入口的key值].js

7.test

用於規定緩存組匹配的文件位置，test: /node_modules/  即爲匹配相應文件夾下的模塊

8.cacheGroups

名字叫作緩存組，其實就是存放分離代碼塊的規則的對象，叫作cacheGroup的緣由是webpack會將規則放置在cache流中，爲對應的塊文件匹配對應的流，從而生成分離後的塊。

cacheGroup中priority 爲分離規則的優先級，優先級越高，則優先匹配。

9.chunks

匹配的塊的類型：initial（初始塊），async（按需加載的異步塊），all（全部塊）

10.priority

這個是最重要的，即使是全部配置項都寫好了，優先級不夠，或者優先級設置不正確，也得不到相應的結果。當須要優先匹配緩存組的規則時，priority須要設置爲正數，當須要優先匹配默認設置時，緩存組需設置爲負數，0爲二者的分界點。

splitChunks的經常使用配置：

optimization: {
        splitChunks: {
            cacheGroups:{
                // 好比你要單獨把jq之類的官方庫文件打包到一塊兒，就可使用這個緩存組，如想具體到庫文件（jq）爲例，就可把test寫到具體目錄下
                vendor: {
                    test: /node_modules/,
                    name: "vendor",
                    priority: 10,
                    enforce: true
                },
                // 這裏定義的是在分離前被引用過兩次的文件，將其一同打包到common.js中，最小爲30K
                common: {
                    name: "common",
                    minChunks: 2,
                    minSize: 30000
                }
                
            },
            chunks:"all",
            minSize: 40000
        }
    }

4.x屬於比較新的版本，官方文檔有些細節說的不是很清楚，只能本身摸索。若有疑問，歡迎指教。