将 bundlesize 与 Travis CI 搭配使用

Milica Mihajlija
Milica Mihajlija
X GitHub 首页

将 bundlesize 与 Travis CI 搭配使用，您可以通过最少的设置定义性能预算，并在开发工作流中强制执行这些预算。Travis CI 是一项服务，可在您每次将代码推送到 GitHub 时在云端为您的应用运行测试。您可以配置代码库，使其仅在 bundlesize 测试通过后才允许合并拉取请求。

Bundlesize 的 GitHub 检查包括与主分支进行大小比较，并在大小出现大幅跳跃时发出警告。

GitHub 上的 Bundlesize 检查

如需实际了解其运作方式，请参阅以下捆绑了 webpack 的应用，您可以通过该应用为您喜欢的小猫咪投票。

猫咪投票应用

设置效果预算

此 Glitch 已包含 bundlesize。

  • 点击 Remix to Edit 即可修改项目。

此应用的主要软件包位于 public 文件夹中。如需测试其大小，请将以下部分添加到 package.json 文件中：

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

如需将压缩后的 JavaScript 软件包大小保持在建议的限制以下，请在 maxSize 字段中将性能预算设置为 170KB。

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

创建测试脚本

由于 Travis 需要运行测试，因此请向 package.json 添加测试脚本：

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

设置持续集成

集成 GitHub 和 Travis CI

首先，在您的 GitHub 账号中为此项目创建一个新代码库，并使用 README.md 对其进行初始化。

您需要在 Travis 上注册账号，然后在个人资料的“设置”部分下激活 GitHub 应用集成。

Travis CI 上的 GitHub Apps 集成

创建账号后，前往个人资料下的设置，点击同步账号按钮，并确保您的新代码库已在 Travis 上列出。

Travis CI“同步”按钮

授权 bundlesize 在拉取请求中发布

Bundlesize 需要获得授权才能在拉取请求中发布内容，因此请访问此链接获取 Bundlesize 令牌，该令牌将存储在 Travis 配置中。

bundlesize 令牌

在项目的 Travis 信息中心内，依次选择更多选项 > 设置 > 环境变量。

在 Travis CI 上添加环境变量

添加一个新环境变量，将令牌作为值字段，并将 BUNDLESIZE_GITHUB_TOKEN 作为名称。

启动持续集成所需的最后一项是 .travis.yml 文件，该文件用于告知 Travis CI 要执行哪些操作。为加快速度，该文件已包含在项目中，并指定了应用使用的是 NodeJS。

完成此步骤后，您便已完成所有设置。如果您的 JavaScript 超出预算，bundlesize 会向您发出警告。即使一开始效果很好，随着时间的推移，随着您添加新功能，千兆字节可能会不断增加。借助自动效果预算监控功能，您可以放心，因为系统会及时提醒您。

试试看

触发您的第一个 bundlesize 测试

如需了解应用与性能预算的对比情况，请将代码添加到您在第 3 步中创建的 GitHub 代码库。

  1. 在 Glitch 中，依次点击工具 > Git、导入和导出 > 导出到 GitHub。

  2. 在弹出式窗口中，输入您的 GitHub 用户名和代码库名称（即 username/repo）。Glitch 会将您的应用导出到名为“glitch”的新分支。

  3. 点击代码库首页上的新建拉取请求按钮，创建新的拉取请求。

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

正在进行的 GitHub 检查

所有检查很快就会完成。很遗憾，猫咪投票应用有点臃肿，未能通过性能预算检查。主软件包为 266 KB，预算为 170 KB。

软件包大小检查失败

优化

幸运的是，您可以通过移除未使用的代码来轻松提升性能。src/index.js 中有两个主要导入项：

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

该应用使用 Firebase Realtime Database 存储数据，但它会导入整个 Firebase 软件包，其中包含的不仅仅是数据库（身份验证、存储、消息传递等）。

只在 src/index.js 文件中导入应用所需的软件包即可解决此问题：

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

重新运行测试

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

  1. 点击工具按钮。

  2. 然后点击 Console 按钮。系统会在另一个标签页中打开控制台。

  3. 在控制台中，输入 webpack 并等待构建完成。

  4. 依次选择 Tools（工具）> Git、Import 和 Export（Git、导入和导出）> Export to GitHub（导出到 GitHub），将代码导出到 GitHub。

  5. 前往 GitHub 上的拉取请求页面，然后等待所有检查完成。

已通过 bundlesize 检查

大功告成！软件包的新大小为 125.5 KB，并且已通过所有检查。 🎉

与 Firebase 不同，导入 moment 库的部分内容并不容易，但值得一试。如需了解如何进一步优化应用，请参阅“移除未使用的代码”Codelab。

监控

应用现在的预算已低于预期，一切顺利。Travis CI 和 bundlesize 会持续监控性能预算，确保您的应用保持快速加载。