再见,CommonsChunkPlugin

2018阿里云全部产品优惠券(好东东,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=gh9qh5ki&utm_source=gh9qh5ki

推荐:Gulp和webpack的区别,是一种工具吗?

[背景: 最近收到很多童鞋的问题:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来?基于此问: 我简单归结了一下区别和概念,让需要的同

webpack 4用两个新的配置选项( 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.*中继承相应的选项值,而testpriorityreuseExistingChunk则只能在缓存组层次上配置。

cacheGroups是一个对象,其中键是缓存组的键,而值是选项(这是全部): chunksminSizeminChunksmaxAsyncRequestsmaxInitialRequests, name

要禁用默认组,传入falseoptimization.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?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。我们可

在线网页数据采集器

相关推荐