webapck4抽取公共模块“SplitChunksPlugin”_vue webpack4 splitchunks 提取公共-CSDN博客

在多入口文件打包的时候，出现了重复引入第三方库的问题，如下：

怎么办：怎么抽取公共模块

在 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