webpack學習筆記——優化部分（optimization.splitChunks）

optimization.splitChunks

cacheGroups

我的感受splitChunks中除了cacheGroup以外的配置是用來做代碼分割的，而cacheGroup是做爲模塊合併的配置項。cacheGroup內配置優先級高於外面配置，能夠理解爲先進行分割再進行合併，分割的代碼放到哪一個緩存組的塊中，由優先級決定。
可進行以下配置：

splitChunks:{
        cacheGroups: {
            common:{
                chunks: 'initial',
                name:'testCommon', // 打包後的文件名
                minSize: 0, 
                minChunks: 2 // 重複2次才能打包到此模塊
            },
            vendor: {
                priority: 1, // 優先級配置，優先匹配優先級更高的規則，不設置的規則優先級默認爲0
                test: /node_modules/, // 匹配對應文件
                chunks: 'initial',
                name:'testVendor',
                minSize: 0,
                minChunks: 1
            }
        }
    }

除了test, priority和reuseExistingChunk只能卸載cacheGroups裏，其餘屬性都能直接寫在splitChunks下。

chunks

前一步配置中提到chunks通常用initial打包規則，chunks可配置的參數有：all, async和initial三種。具體區別詳見：
http://www.javashuo.com/article/p-shzudeee-g.html

總結一下：
initial: 對於匹配文件，非動態模塊打包進該vendor,動態模塊優化打包
async: 對於匹配文件，動態模塊打包進該vendor,非動態模塊不進行優化打包
all: 匹配文件不管是否動態模塊，都打包進該vendor

webpack4的默認配置中，splitChunks.chunks默認是async,由於webpack更但願將代碼中異步引入的部分做爲獨立模塊進行打包，異步的部分在須要時引入，這種懶加載的方式更能提高頁面性能。

注：import()可動態加載模塊，返回一個Promise。

minSize

當模塊大於minSize時，進行代碼分割

maxSize

當模塊大於maxSize時，嘗試將該模塊拆分，如設置maxSize爲50*1024，代碼中引入了jQuery,jQuery模塊大於50kb,因而嘗試將jQuery拆分（只是嘗試，不必定真能拆分紅功）

maxAsyncRequests

同時加載的模塊數，若代碼分割設置的是一個庫分割成一個模塊，打開某個頁面時同時須要加載10個庫，設置maxAsyncRequests：5，只會將那10個庫分割成5個模塊

maxInitialRequests

最大初始化加載次數，入口文件能夠並行加載的最大文件數量。
maxInitialRequest和maxAsyncRequests中的'initial'和'async'表明的意思和chunks配置中的'initial'和'async'同樣，maxAsyncRequests表明懶加載時最多隻能同時引入多少個模塊，maxInitialRequests表明非懶加載時最多能同時引入多少模塊。
假設maxInitialRequests設爲3，有文件a.js中，使用了大量import xx from 'xx',a.js依賴的這些非動態加載的模塊，最多隻會被打包成3個模塊。
可參考：
https://ymbo.github.io/2018/05/21/webpack配置代碼分割/#%E4%B8%89%E3%80%81%E7%96%91%E9%9A%BE%E9%85%8D%E7%BD%AE%E9%A1%B9

automaticNameDelimiter

打包的chunk名字鏈接符，如設爲'-',生成的chunk文件名爲chunk-name.js

name

是否以cacheGroups中的filename做爲文件名

reuseExistingChunk

重複使用已經存在的塊，若某個模塊在以前已經被打包過了，後面打包時再遇到這個模塊就直接使用以前打包的模塊