webapck4抽取公共模塊“SplitChunksPlugin”

頭疼：重復引用第三方庫

在多入口文件打包的時候，出現了重復引入第三方庫的問題，如下：

怎么辦：怎么抽取公共模塊

在 webpack4 之前，都是利用 CommonsChunkPlugin 插件來進行公共模塊抽取。

到了 webpack4 之后，利用了 SplitChunksPlugin 插件來進行公共模塊抽取，所以以下只針對 SplitChunksPlugin 插件進行說明。

默認配置

開箱即用的插件，默認情況下只對按需塊（異步塊）有影響。
不用另外引入 SplitChunksPlugin插件，以下是其默認配置：

module.exports = {
    optimization: {
        splitChunks: {
            chunks: "async",// all async initial
            minSize: 30000,
            maxSize: 0,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: "~",
            name: true,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                }
            }
        }
    },
};

先來了解下幾個屬性說明

chunks

chunks 屬性可選all、async、initial或是自己匹配chunk名稱。

async 表示異步塊，如通過以下形式引入的

import("@/views/home");

initial 表示非異步塊，如入口處的配置，這里的非異步快有三個，index、main、other

module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js",
        other: "./src/other.js"
    }
};

cacheGroups

緩存組，這里是我們表演的舞台，抽取公共模塊什么的，都在這個地方

priority

優先級，只配置在緩存組的每一項，決定執行的順序。

minChunks

最小塊，即當塊的數量大於等於minChunks時，才起作用

minSize

最小大小，即當抽取的公共模塊的大小，大於minSize所設置的值，才起作用

test

匹配規則，說明要匹配的項

開始表演：抽取公共模塊

直接上配置：

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 10 // 優先級
                },
                common: {
                    name: "common",
                    test: /[\\/]src[\\/]/,
                    minSize: 1024,
                    chunks: "all",
                    priority: 5
                }
            }
        }
    },
};

這里我配置了兩個緩存組，即 vendor 和 common

• vendor: 抽取來自 node_modules 文件夾下的第三方代碼，優先級權重為10
• common: 抽取來自 src 文件夾下的代碼，優先級權重為5
• vendor比common的優先級權重高，所以先提取 vendor，再提取 common

打包

做好以上配置之后，打包的結果如下：

• 在入口文件引用的第三方文件（這里我用了lodash來測試）被打包到 vendor.js
• 在入口文件引用到的公共文件（這里我用了自己寫的util.js）被打包到common.js

注意

這里還需要注意的是，公共引用的css文件，本來我是用了extract-text-webpack-plugin插件抽取到單獨的文件，因為css文件也有公共引用，所以也被 SplitChunksPlugin 插件抽取成公共模塊打包到了common.css文件。

關於打包文件名

output.chunkFilename這里配置的就是非入口文件的文件名
splitChunks.cacheGroups.{cacheGroup}.filename 更細的配置可以參考這里

關於順序

在cacheGroups里，由priority決定抽取公共代碼的順序，priority值越大，就先執行。
cacheGroups里抽取公共代碼的部分完成之后，再執行cacheGroups外的抽取公共代碼部分。

閱讀

split-chunks-plugin插件官方介紹

原文鏈接:https://www.jianshu.com/p/f5039ce9a70b