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