Webpack｜關於splitChunks的大小事

這次要來分享關於splitChunks分割公用模組的功能！splitChunks是webpack4版本以後內建的plugin，功能是用來分割打包的公用模組，大家應該都有發現，使用webpack來打包網站時，會碰到專案的JS程式碼中有許多相同或是引入套件時的程式碼

要如何將引入的套件所需的程式碼提取出來變成一個不會開啟的但又必備的JS檔或是將公用的function提取出來變成一包專用的公用檔案呢？

Step1.安裝webpack-merge

首先，在npm中安裝webpack-merge

npm i webpack-merge

在build的webpack設定檔中，加入

const webpackMerge = require('webpack-merge');

Step2.設定splitChunks的參數

module.exports = webpackMerge(commonConfig, {
   mode: 'production',
   optimization: {
      runtimeChunk: {
        name: 'runtime'
      },
      splitChunks: {
         chunks: 'all',
         name: true,
         cacheGroups: {
            commons: {
              chunks: 'initial',
               name: 'commons', //分割出來的檔案命名
               minChunks:2, //被引入2次以上的code就會被提取出來
               priority: 1, //檔案的優先順序，數字越大表示優先級越高
            },
            vendor: {
               test: /[\\/]node_modules[\\/]/, //提取引入的模組
               chunks: 'initial',
               name: 'vendor', //分割出來的檔案命名
               priority: 2, //檔案的優先順序，數字越大表示優先級越高
               enforce: true
            }
      },
   },
});

這裡來稍微說明一下每個參數的作用分別為optimization、runtimeChunk、splitChunks和cacheGroups

optimization：代表的是優化，會依據選擇的mode執行不同的優化。
runtimeChunk： 對於每個運行時塊，引入的mode會被分別初始化，這邊獨立提取出來還有一個優點是，當每次存檔build後不會更動到webpack編譯時會重置檔案編號的情況。
splitChunks：就是設定區要分割檔案區塊的項目了。
cacheGroups：可以自行配置檔案的分割。

而splitChunks有很多參數可以去設定，在這裡介紹最常用的8項給大家

1. chunks：表示要用甚麼樣的方式去提取文件，基本上有三個值可以設定async(異步)、all、initial(初始)，另外也可以透過函數自行設定所需的方式喔！
   ● async：只處理動態引入的模塊
   ● all：不論是動態還是非動態引入的模塊，同時進行優化打包
   ● initial：把非動態模塊打包，動態模塊進行優化打包
2. minSize：文件在壓縮前的最小大小，默認值為 30000 bytes
3. maxSize：文件在壓縮前的最大大小，默認值一開始沒有檔案上限大小
4. minChunks：文件當中的code被引用次數，默認值：1
5. maxAsyncRequests：最大的異步載入的次數，默認為5
6. maxInitialRequests：指的是可拆分幾個chunks，默認為3
7. automaticNameDelimiter：從抽取出來的文件自動抓取檔名，而檔名和檔名之間默認的連接符號為~
8. name：可以設定抽取出來文件的名字，沒有設定的就會自動生成文件檔名

將runtimeChunk和node_modules提取出來後，build的JS就會被瘦身許多，而我自己則會將各個JS中會共同引用到的function拔出來的設定，就像是上面範例的寫法。

在編寫splitChunks時，參數值其實都不難設定，我碰到最大的困難就只有chunks的選擇，這會影響需要提取的code要怎麼分割檔案，如果大家想嘗試分割成不同的打包方式或是有更好的分割方式都歡迎和我一起分享喔~希望大家都可以找到最適合你的打包方式~