2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址:
https://promotion.aliyun.com/ntms/yunparter/invite.html
webpack 4用两个新的配置选项([背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?基于此问: 我简单归结了一下区别和概念,让需要的同
optimization.splitChunks
and
optimization.runtimeChunk
)替代了CommonsChunkPlugin。本文介绍这两个新选项的用法。
默认值
默认情况下会做一些优化,对多数用户都是合适的。
注意,默认值只会影响按需加载的块,因为要修改初始(initial)块会影响HTML中的script
标签。如果你可以自己处理(比如根据入口配置生成script
标签的时候),那可以对初始化也应用这些默认的优化:optimization.splitChunks.chunks: "all"
。
webpack根据如下条件自动拆分块:
- 新块可以共享或者模块来自
node_modules
文件夹 - 新块会大于30kb(min+gz以前)
- 按需加载块之时最大的并行请求数小于等于5
- 页面初次加载时最大的并行请求数小于等于3
为尽力满足后两个条件,块的体积可以更大。
下面看几个例子。
例1
//entry,js import("./a");
//a.js import "react"; //...
结果:会创建一个独立的包含React的块。在执行import
调用时,这个块会随着包含./a
的块并行加载。
为什么:
- 条件1:这个块包含的模块来自
node_modules
- 条件2:react大于30kb
- 条件3:在执行
import
调用时,并行请求数是2 - 条件4:不影响页面初次加载
为什么应该这样拆分?
react可能不会像应用代码那样经常变更。把它挪到一个独立的块,浏览器就可以缓存它(假设你使用了长期缓存配置:chunkhash、records、Cache-Control)。
例2
entry.js import("./a"); import("./b");
//a.js import "./helpers"; //helpers有40kb //...
//b.js import "./helpers"; import "./more-helpers"; //more-helper也有40kb //...
结果:会创建一个独立的包含./helpers
的块。在执行import
调用时,这个块会与原始的块并行加载。
为什么:
- 条件1:这个块由两个
import
调用共享 - 条件2:helpers大于30kb
- 条件3:在执行
import
调用时的并行请求数为2 - 条件4:不影响页面初次加载
为什么应该这样拆分?
让helpers代码保留在每个块中意味着用户要下载它两次,而独立出来以后,则只需下载一次。实际上这也是有代价的,因为会多一次请求。这也是为什么有最小30kb的限制的原因。
With optimizations.splitChunks.chunks: "all"
the same would happend for initial chunks. Chunks can even be shared between entrypoints and on-demand loading.
配置
对于喜欢折腾的用户,还有很多选项可供使用。
声明:不要在没有度量的情况下手工优化。默认值考虑了最佳实践和Web性能。
缓存组
这个选项将模块分配到缓存组(cacheGroups
)。
默认是将node_modules
中的所有模块都分配到一个叫vendors
的缓存组,将至少在2个块中重复出现的模块分配到另一个叫default
的缓存组。
推荐:webpack安装和配置
[一. 安装我们常规直接使用 npm 的形式来安装:$ npm install webpack -g当然如果常规项目还是把依赖写入 package.json 包去更人性化:$ npm init$ npm install webpack --
一个模块可以被分配到多个缓存组。这个优化通过priority
选项或构成较大块的模块来优先选择缓存组。
条件
在满足所有条件的情况下,来自相同块和缓存组的模块会构成一个新块。
有4个选项可以用于配置条件:
minSize
(default: 30000) 块的最小大小minChunks
(default: 1) 拆分前共享一个模块的最小块数maxInitialRequests
(default 3) 一个入口最大并行请求数maxAsyncRequests
(default 5) 按需加载时最大行行请求数
命名
要控制拆分后新块的名字,可以使用name
选项。
注意:如果给不同的块指定了相同的名字,结果就是这些块会被合并成一个。这样配置可以把所有vendor
模块拆分为一个由所有入口点/拆分点共享的块,但我不建议这样用。因为这会导致下载的代码变多。
魔术值true
会自动根据块和缓存组的键选择一个名字。另外,除给这个选项传一个字符串,也可以传一个函数。
如果名字与入口点名字相同,则删除入口点。
选择块
通过chunks
选项可以选择块,有3个值:"initial"
、"async"
和"all"
。分别用于选择初始块、按需加载的块和所有块。
reuseExistingChunk
选项用于配置在模块完全匹配时重用已有的块,而不是创建新块。
选择块可以针对每个缓存组分别设置。
选择模块
test
选项控制当前缓存组选择哪个模块。省略表示选择所有模块。值可以是RegExp、字符串或函数。
可以匹配绝对模块资源的路径或块名字。如果匹配的是块名字,则会选择该块中的所有模块。
配置缓存组
以下是默认配置:
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 } } }
默认情况下,缓存组会从splitChunks.*
中继承相应的选项值,而test
、priority
和reuseExistingChunk
则只能在缓存组层次上配置。
cacheGroups
是一个对象,其中键是缓存组的键,而值是选项(这是全部): chunks
、 minSize
、minChunks
、maxAsyncRequests
、maxInitialRequests
, name
。
要禁用默认组,传入false
:optimization.splitChunks.cacheGroups.default: false
。
这里默认缓存组(default
)的优先级(priority
)是负数,以便任意自定义的缓存组都优先级(默认为0)都会更高。
以下是一些配置的实例:
splitChunks: { cacheGroups: { commons: { name: "commons", chunks: "initial", minChunks: 2 } } }
这样就创建了一个commons
块,包含入口点共享的所有代码。
注意:这会导致用户不必要地下载更多代码。
splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/] name: "vendors", chunks: "all" } } }
这样就创建了一个vendors
块,包含整个应用中来自node_modules的所有代码。
注意:这会导致用户不必要地下载更多代码。
optimization.runtimeChunk
optimization.runtimeChunk: true
会给每个入口文件的输出再添加一个块,其中只包含运行时。
[什么是 webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可