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

在工程化地使用webpack時，公共代碼抽離是不可或缺的，4.x版本之后，commonsChunkPlugin已經被去掉，splitChunksPlugins登上舞台，並且優化了很多配置選項，集體課件官方文檔，這里不做過多說明。

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

首先先說每個配置項的作用：

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

1.  minSize 

 分離后的最小塊文件大小，單位為字節

2. minChunks

分離前，該塊被引入的次數（也就是某個js文件通過import或require引入的次數）

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（所有塊）

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
        }
    }