出现在：快速加载时间

原文地址：web.dev/using-bundl…

原文作者：web.dev/authors/mih…

发布时间：2019年2月1日

使用Travis CI的bundlesize可以让你以最少的设置定义性能预算，并将其作为开发工作流程的一部分来执行。Travis CI是一项服务，每次推送代码到GitHub时，都会在云端为你的应用运行测试。你可以配置你的仓库，使它不允许合并拉请求，除非bundlesize测试已经通过。

Bundlesize的GitHub检查包括与主分支的大小比较，以及在大小大幅增加时发出警告。

GitHub上的Bundlesize检查

你也可以将bundlesize与Circle CI、Wrecker和Drone一起使用。

要想看到它的实际效果，这里有一个与webpack捆绑的应用程序，让你为你最喜欢的猫咪投票。

猫咪投票应用

设定业绩预算

此Glitch已经包含bundlesize。

点击Remix到编辑，使项目可编辑。

这个应用程序的主捆绑包在公共文件夹中。要测试其大小，请在package.json文件中添加以下部分。

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

你也可以为不同的文件设置不同的阈值。如果你要在应用程序中拆分一个捆绑包，这一点特别有用。

要将压缩后的 JavaScript bundle 大小保持在建议的限制之下，请在 maxSize 字段中将性能预算设置为 170KB。

Bundlesize 支持 glob 模式，文件路径中的 * 通配符将匹配公共文件夹中的所有 bundle 名称。

默认情况下，bundlesize 会测试 gzipped 大小。你可以使用压缩选项切换到 brotli 压缩或完全关闭。

创建一个测试脚本

因为Travis需要一个测试来运行，所以在package.json中添加一个测试脚本。

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

建立持续集成

整合GitHub和Travis CI

首先，在你的GitHub账户上为这个项目创建一个新的仓库，并以README.md初始化它。

你需要在Travis上注册一个账户，并在你的配置文件的设置部分激活GitHub Apps集成。

在Travis CI上集成GitHub Apps

一旦你有了一个账户，去你的配置文件下的设置，点击同步账户按钮，并确保你的新repo被列在Travis上。

Travis CI同步按钮

授权bundlesize发布拉取请求

Bundlesize需要授权才能发布拉取请求，所以请访问此链接以获取将存储在Travis配置中的bundlesize令牌。

bundlesize token

在项目的Travis仪表板中，进入更多选项 > 设置 > 环境变量。

在Travis CI上添加环境变量

添加一个新的环境变量，将token作为值域，BUNDLESIZE_GITHUB_TOKEN作为名称。

要启动持续集成，最后需要的是一个.travis.yml文件，它告诉Travis CI要做什么。为了加快进度，它已经包含在项目中了，并且指定了应用程序使用的是NodeJS。

有了这一步，你就准备好了，如果你的JavaScript曾经超出预算，bundlesize会警告你。即使你一开始很好，但随着时间的推移，当你添加新功能时，千字节数也会堆积起来。有了自动性能预算监控，你可以放心，因为你知道它不会被忽视。

试试吧

触发您的第一次捆绑测试

要查看应用程序与性能预算的对比情况，请将代码添加到步骤3中创建的GitHub repo中。

在Glitch上，点击 "工具">"Git"、"导入 "和 "导出">"导出到GitHub"。
在弹出的窗口中，输入你的GitHub用户名和repo的名称为username/repo。Glitch会将你的应用导出到一个名为 "glitch "的新分支。
点击仓库主页上的New pull request按钮，创建一个新的pull request。

现在你会在拉请求页面上看到正在进行的状态检查。

Github的进度检查

要不了多久就能完成所有检查。不幸的是，猫咪投票应用有点臃肿，没有通过性能预算检查。主捆绑包是266KB，预算是170KB。

捆绑大小检查失败

优化

幸运的是，你可以通过删除未使用的代码来轻松赢得一些性能。在src/index.js中有两个主要的导入。

import firebase from "firebase";
import * as moment from 'moment';

该应用使用Firebase实时数据库来存储数据，但它导入的是整个firebase包，而这个包不仅仅是由数据库组成的（auth、存储、消息等）。

通过在src/index.js文件中只导入应用程序需要的包来解决这个问题。

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

firebase/app的导入，为每一个不同的服务设置了API表面，总是需要的。

重新运行测试

由于源文件已经更新，你需要运行webpack来构建新的bundle文件。

点击 "工具 "按钮。
然后点击控制台按钮。这将在另一个标签页中打开控制台。
在控制台中，输入webpack并等待它完成构建。
从** "工具">"Git"、"导入 "和 "导出">"导出到GitHub "**中将代码导出到GitHub。
转到GitHub上的pull request页面，等待所有检查完成。

通过 bundlesize 检查

成功了! 捆绑的新大小是125.5 KB，所有的检查都通过了。🎉

与Firebase不同的是，导入部分时刻库不能那么容易，但值得一试。在Remove unused code codelab中查看如何进一步优化应用。

监控

现在应用已经在预算之内，一切都很好。Travis CI和bundlesize会持续为你监控性能预算，确保你的应用保持快速。

[Web翻译]在Travis CI中使用bundlesize