将 bundlesize 与 Travis CI 搭配使用

Milica Mihajlija
Milica Mihajlija

通过将 bundlesizeTravis CI 结合使用,您只需进行极少的设置即可定义性能预算,并在开发工作流中强制执行这些预算。Travis CI 是一项服务,每当您将代码推送到 GitHub 时,系统都会在云端为您的应用运行测试。您可以配置代码库,使其不允许合并拉取请求,除非软件包大小测试通过。

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

GitHub 上的 Bundlesize 检查

如需查看实际运用情况,以下应用捆绑了 webpack,可让您为喜爱的猫咪投票

猫咪投票应用

设置性能预算

此 Glitch 已包含 bundlesize。

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

此应用的主软件包位于公共文件夹中。如需测试其大小,请将以下部分添加到 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 应用集成

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

Travis CI Sync 按钮

授权 bundlesize 以针对拉取请求发布

Bundlesize 需要获得授权才能针对拉取请求进行发布,因此请访问此链接以获取将存储在 Travis 配置中的 bundlesize 令牌

bundlesize 令牌

在项目的 Travis 信息中心内,依次点击更多选项 > 设置 > 环境变量

在 Travis CI 上添加环境变量

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

您需要启动持续集成的最后一个文件是 .travis.yml 文件,用于告知 Travis CI 该怎么做。为加快速度,该文件已包含在项目中,并指定了应用使用 NodeJS。

在此步骤中,一切都设置好了,如果 JavaScript 超出预算, bundlesize 会向您发出警告。即使一开始表现出色,但随着时间的推移,随着您不断添加新功能,可能会大量使用千字节。借助自动化的效果预算监控功能,您可以高枕无忧,因为该功能不会被忽略。

试试看

触发您的第一个 bundlesize 测试

如需查看应用的性能预算相比如何,请将代码添加到您在第 3 步中创建的 GitHub 代码库中。

  1. 在 Glitch 上,依次点击 Tools > Git, Import, and Export > Export to GitHub

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

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

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

正在进行 GitHub 检查

完成所有检查不会需要很长时间。遗憾的是,猫投票应用有点臃肿,没有通过性能预算检查。主软件包为 266 KB,预算为 170 KB。

bundlesize 检查失败

优化

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

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

该应用使用 Firebase Realtime Database 存储数据,但它导入的是整个 Firebase 软件包,而 Firebase 软件包不仅仅包含数据库(身份验证、存储、消息传递等)。

若要解决此问题,请在 src/index.js 文件中仅导入应用所需的软件包:

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

重新运行测试

由于源文件已更新,因此您需要运行 webpack 以构建新的软件包文件。

  1. 点击工具按钮。

  2. 然后点击控制台按钮。此操作会在另一个标签页中打开该控制台。

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

  4. Tools > Git, Import and Export > Export to GitHub 中将代码导出到 GitHub。

  5. 转到 GitHub 上的拉取请求页面,然后等待所有检查完成。

已通过 bundlesize 检查

成功!新的媒体包大小为 125.5 KB,并且已通过所有检查。 🎉

与 Firebase 不同,导入动作库的某些部分不可能那么轻松,但值得一试。如需了解如何进一步优化应用,请参阅“移除未使用的代码”Codelab

监控

该应用的费用现已低于预算,且一切正常。Travis CI 和 bundlesize 可持续为您监控性能预算,确保您的应用保持快速运行。