webapck4抽取公共模块“SplitChunksPlugin”

头疼:重复引用第三方库

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

index.png

main.png

other.png

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

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 属性可选allasyncinitial或是自己匹配chunk名称。

async 表示异步块,如通过以下形式引入的

import("@/views/home");

initial 表示非异步块,如入口处的配置,这里的非异步快有三个,indexmainother

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
                }
            }
        }
    },
};

这里我配置了两个缓存组,即 vendorcommon

  • vendor: 抽取来自 node_modules 文件夹下的第三方代码,优先级权重为10
  • common: 抽取来自 src 文件夹下的代码,优先级权重为5
  • vendorcommon的优先级权重高,所以先提取 vendor,再提取 common

打包

做好以上配置之后,打包的结果如下:

dist.png

  • 在入口文件引用的第三方文件(这里我用了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

posted @ 2019-06-04 13:39  蟹行者  阅读(...)  评论(...编辑  收藏