写在前面
前面写了有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题,有兴许可以看一下。
0. 参数介绍
先对参数有一个大概的认识,虽然撸了很多遍官方的更新文档,但是还是去参看了一下新的wbepack源码,下面是各种参数及含义:
initial
(初始块)、async
(按需加载块)、all
(全部块),默认为all
;对于缓存组是一个对象,处了可以有上面的chunks
、minsize
、minchunks
、maxasyncrequests
、maxinitialrequests
、name
外,还有其他的一些参数:
如果不在缓存组中重新赋值,缓存组默认继承上面的选项,但是还有一些参数是必须在缓存组进行配置的。
function
、boolean
、string
、regexp
,默认为空;1. 基本使用
首先,在新版本的webpack会默认对代码进行拆分,拆分的规则是:
node_modules
中的模块小于30kb的模块不值得再单独发送一次请求,在很小的模块的前提下,相比与多次打包,减少请求次数成本要低。
当然也可以不使用默认的配置,比如这样:
new webpack.optimize.splitchunksplugin({ chunks: "all", minsize: 20000, minchunks: 1, maxasyncrequests: 5, maxinitialrequests: 3, name: true )}
上面的代码就表示,在所有代码中,引用模块大小最小为20kb,引用次数最少为1次,按需加载最大请求次数为5,初始化加载最大请求次数为3的所有模块就行拆分到一个单独的代码块中,name
表示代码的名字,设置为true
则表示根据模块和缓存组秘钥自动生成。
2. 使用缓存组(cache groups)
如果想继续细分代码,可以使用缓存组(cache groups)。同样的,缓存组也有默认的配置;缓存组默认将node_modules
中的模块拆分带一个叫做vendors
的代码块中,将最少重复引用两次的模块放入default
中。
这是一段里面的代码:
splitchunks: { chunks: "async", minsize: 30000, minchunks: 1, maxasyncrequests: 5, maxinitialrequests: 3, name: true, cachegroups: { default: { minchunks: 2, priority: -20 reuseexistingchunk: true, }, vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } }
上面是缓存组的默认配置,可以通过default:false
禁用默认的缓存组,然后就可以自定义缓存组,将初始化加载时被重复引用的模块进行拆分,就像这样:
cachegroups: { commons: { name: "commons", chunks: "initial", minchunks: 2 } }
之后就随心所欲,可以根据具体的需求,创建多个缓存组:
cachegroups: { a: { // ... }, b: { // ... } // ... }
写在后面
webpack更新已经过了很多天了,最近算是把更新的基本都过了一遍,在此记录以便日后查看,理解有问题的地方还请不吝赐教。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问, 点击进行留言回复!!
[JSOI2008]Blue Mary的战役地图 Hash题解
牛客编程巅峰赛S1第8场 - 青铜&白银 A.数学B.贪心C.枚举
网友评论