webpack4中的splitChunks是一个比较重要的功能,它主要是控制如何分离模块的,今天来看看它的一些配置参数。(本文主要参考文章: 理解webpack4.splitChunks)

默认配置

webpack4中默认就有一份关于splitChunks的配置,我们从这里入手:

chunks

包含['initial','async','all']三种设置,默认是async。我们先来看一个简单的引用关系:

我们用图像的方式更好的理解上面的关系结构:

background Layer 1 react-dom 库引用(node_modules下) entry1.js page1.js lodash (异步引用) 打包结果: 1.entry1.****.js 2.page1.****.js 3.vendor~page1.*****.js 入口文件

我们来看上面的打包结果:首先entry1.js肯定可以打出一个包;然后page1.js因为是被异步引用,所以从主包里分离出去单独成为一个包;最后page1中lodash也被打了一个包。

那为啥entry1.js中的react-dom没有被打包?因为chunks:'async'的意思就是只会分割异步加载里面的引用,因为page1.js是被异步引用的,因此page1中的引用可以被分离出去。

如果chunks:'initial',那么表示会分割入口文件的引用:

background Layer 1 react-dom 库引用(node_modules下) entry1.js page1.js lodash (异步引用) 打包结果: 1.entry1.****.js 2.page1.****.js 3.vendor~entry1.*****.js 入口文件

如果chunks:'all',那么表示入口的和异步引用的都会分割:

background Layer 1 react-dom 库引用(node_modules下) entry1.js page1.js lodash (异步引用) 打包结果: 1.entry1.****.js 2.page1.****.js 3.vendor~entry1.*****.js 入口文件 4.vendor~page1.*****.js

cacheGroups

cacheGroups一般分为库文件(node_modules下),打包都是带有vendor的;还有就是其他引用文件,带有default。

(我们将SplitChunksPlugin配置的chunks改成'all',然后进行打包)

看看关系图:

background Layer 1 entry1.js 入口文件 entry2.js 库文件(node_modules下) react-dom 其他文件 jquery.js 打包结果: 1.entry1.***.js 2.entry2.***.js 3.vendor~entry1~entry2.***.js 4.default~entry1~entry2.***.js

首先entry1.js和entry2.js肯定会各打一个包,然后对于jquery来说,这里不是用库引用的方式去引用的,并且引用次数达到了两次(minChunks:2),因此被分在default~entry1~entry2中。

关键为啥react-dom被分在vendor~entry1~entry2中?一方面它属于库引用,另一方面它引用的次数也达到了两次,那到底属于vendor还是default?因为venfor中的priority大于default中的priority,因此优先分配给vendor。

maxInitialRequests

入口文件最大引用个数,我们将SplitChunksPlugin配置的chunks改成'all':

看看关系图:

background Layer 1 entry1.js 入口文件 entry2.js 库文件(node_modules下) react-dom 其他文件 jquery.js 打包结果: 1.entry1.***.js 2.entry2.***.js 3.entry3.***.js 4.page1.***.js entry3.js orgchart.js page1.js 6.vendor~entry1~entry2~entry3.***.js 7.default~entry1~entry2.***.js 5.vendor.page1.***.js 1 2 3 react-dom

上面的关系图中,为啥orgchart.js没有被打包?因为entry1.js作为入口文件,已经包含三个文件(包括自己)。

按理说jquery.js和orgchart.js等级应该是一样的,为啥先分离jquery.js?那可能和它们的大小有关系,jquery.js的体积大于orgchart.js,因此先被分离。

maxAsyncRequests

最大异步请求数,我们将SplitChunksPlugin配置中的maxAsyncRequests改为3,chunks改为'all':

关系图:

background Layer 1 entry1.js 入口文件 entry2.js 库文件(node_modules下) react-dom 其他文件 jquery.js 打包结果: 1.entry1.***.js 2.entry2.***.js 3.entry3.***.js 4.page1.***.js entry3.js orgchart.js page1.js 6.vendor~entry1~entry2~entry3.***.js 7.default~page1~entry2.***.js 5.vendor.page1.***.js lodash 1 2 3

我们可以看到orgchart.js并没有打包,因为page1.js已经包含三个文件了(包括自己)。

jquery.js和orgchart.js的问题和上面一样,因为jquery.js体积大于orgchart.js,所以先被打包。

maxSize/minSize

minSize:10000(单位B),表示如果分割出去的包在10kb以下,那么就不用分割了,如果以上那么继续判断;maxSize:25000,如果包在25kb以上,继续分割,如果在25kb以下,继续判断。(默认maxSize为0,表示包没有上限)

因为分割包的时候,实际上是有很多的制约关系,判断顺序如下:minSize > maxSize > maxInitialRequest/maxAsyncRequests,也就是说,它们只是起到一个分割的判断作用。

例如你设置了{minSize:10000,maxSize:25000},并不代表你分割出的包一定在10kb到25kb之间,可能有小于10kb的(不用再分割),也可能有大于25kb的(最小单元,无法分割),也有处于10-25kb之间的(满足配置)。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字