webpack4 splitChunkPlugin配置介绍

webpack4 splitChunkPlugin配置介绍

前言

webpack4删除了CommonsChunkPlugin插件，它使用内置API optimization.splitChunks和optimization.runtimeChunk,这意味着webpack会默认为你生成共享的代码块，splitchunk的配置很是灵活，让咱们一块儿看一下他的配置。 原文阅读：zhangzippo.github.io/posts/2019/…

基本配置项与commonsChunkPlugin大同小异，下方是启用mode=production后，splitChunk的默认配置：

splitChunks: {
    chunks: "async",
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
    cacheGroups: {
        vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
        },
        default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
        }
    }
}

复制代码

cacheGroups中的配置默认会继承外部的配置，可是有3哥配置是每一个cacheGroup独有的，分别为test, priority 和 reuseExistingChunk，test支持正则匹配路径，priority表示某个文件被命中多个规则时采用哪一个cacheGroup,reuseExistingChunk表示若是当前块包含已经从主bundle中分离出来的模块，那么它将被重用，而不是生成一个新的模块，通常设置为 true。从默认配置能够看出会默认将代码中从node_modules中引用的的代码按规则抽离出来。能够对optimization.splitChunks.cacheGroups.default或者optimization.splitChunks.cacheGroups.verndor为false以放弃使用默认的配置。

实际上cacheGroups中的配置只是对咱们文件分离的细化配置，咱们主要关心的配置项目主要是chunks, minSize, minChunks, maxAsyncRequests, maxInitialRequests

开始分析

咱们一个配置一个配置的过，首先来看chunks属性

chunks

默认做用于异步chunk，值为all/initial/async/function(chunk){}几类，当值为function时，第一个参数是遍历全部入口chunk的chunk模块，咱们能够经过判断chunk的名字来按需处理。咱们这里主要讲前三个配置。为了咱们后面容易分析，咱们这里采起一个用例以下图所示：

咱们新建两个文件testA.js和testB.js，他们共同静态引用Vue，共同动态引用qs,testA静态引用lodash，testB静态引用lodash. 代码结构以下： testA.js

import Vue from 'vue'
import lodash from 'lodash'
import('query-string').then(component=>{
    console.log(component)
})
console.log(lodash.add(1))
new Vue({
    el: '#app',
    template: '<h1>qewqwe<h1/>',
})

复制代码

testB.js

import Vue from 'vue'
import('query-string').then(component=>{
    console.log(component)
})
import('lodash').then(component=>{
    console.log(component)
})
new Vue({
    el: '#app',
    template: '<h1>qewqwe<h1/>',
})

复制代码

咱们仅切换chunks的配置看看现象：首先是默认的async，咱们经过Bundle Analyzer能够看到只有异步引入的包被提取了出来

接着咱们设置chunks选项为all,咱们能够看到不论是异步引用仍是静态引用的包都被提取了出来,而且引用方式不一样的lodash只被提取出了一次（实际上静态引用被提取出来仍是要知足一些条件的，咱们后面再讲）文件命名上，走的是默认配置，静态引用的包的名字为verdor加～符号跟引用的包名加chunkhash

接着咱们再看当设置为initial时的状况，能够看到qs被提取，vue被提取，而lodash被提取了两次，产生了重复的代码。

minSize与maxSize

这两个配置成对出现，字面意思就能够看出来是知足相应大小的包才会被提取出来，单位是字节，从上面的默认配置中咱们能够得知，minSize的值为30000，也就是说小于这个数的包不会被提取而是会被打到引用的文件中去，maxSize与之相反，但优先级小于minSize，另外值得注意的是，这两个值只对静态引入的公共包有影响，对于异步引入的包，无论大小多少哪怕minSize设置的很大，也一样是会被提取出来的，你们能够自行尝试。

minChunks

与上面两个配置同样，一样只做用于静态引入的状况，控制包被引用的次数来决定是否提取公共包，从上面的默认配置中咱们得知默认是只要被引用的node_modules中的包就会被提取，当咱们放大为3时，咱们能够看到vue并不会被提取出来了。

maxInitialRequests

简单来说就是每个入口文件打包完成后最多能有多少个模块组成（1.都打到一块儿，1以上：能够拆分，这个数值不包括入口文件（entrys）自己）举个例子：像刚才咱们的引用方式，当咱们设置为1时，咱们能够看到咱们的html模版中的引用只引用了testA和testB，也就是模版最多引入这两个文件，其余都会被合并，当咱们增长以后就会在这两个入口文件的基础上增长引入的数量，也就从testA与testB中抽离出了公共代码。具体现象你们能够设置完试试看。

maxAsyncRequests

这个配置的现象是最难以琢磨的，我至如今也没能明白其具体含义，按字面意思理解，我理解为若是异步引用的包的数量超过了maxAsyncRequests的设置，那么异步的包就会被合并，然而事实上现象并不是如此，即便设置的很小设置成1，异步引入的包仍是会生成一个个独立的被提取出来，我尝试去github上提问，看到做者只回复了一句话：

It limits the requests per import()

可能本人比较愚钝，尚不能参破其中奥妙

优先级

有时咱们在配置时经常发生不生效或者与预想不一样的结果，每每时因为以上的属性的优先级不一样形成的，以上属性的优先级为：

minSize > maxSize > maxInitialRequest/maxAsyncRequests

参考文章： SplitChunksPlugin | webpack 中文网