将 bundlesize 与 Travis CI 搭配使用,您可以通过最少的设置定义性能预算,并在开发工作流中强制执行这些预算。Travis CI 是一项服务,可在您每次将代码推送到 GitHub 时在云端为您的应用运行测试。您可以配置代码库,使其仅在 bundlesize 测试通过后才允许合并拉取请求。
Bundlesize 的 GitHub 检查内容包括与主分支的大小比较,以及在大小大幅增加时发出警告。
如需查看实际效果,这是一款与 webpack 捆绑的应用,可让您为喜爱的猫咪投票。
设置效果预算
This 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 上。
授权 bundlesize 在拉取请求中发布
Bundlesize 需要获得授权才能在拉取请求中发布内容,因此请访问此链接获取 Bundlesize 令牌,该令牌将存储在 Travis 配置中。
在项目的 Travis 信息中心内,转到更多选项 > 设置 > 环境变量。
添加一个新环境变量,其中令牌作为值字段,BUNDLESIZE_GITHUB_TOKEN 作为名称。
启动持续集成所需的最后一项是 .travis.yml
文件,该文件用于告知 Travis CI 要执行哪些操作。为加快速度,该文件已包含在项目中,并指定了应用使用的是 NodeJS。
完成此步骤后,您就完成了所有设置。如果您的 JavaScript 超出预算, bundlesize 会向您发出警告。即使一开始效果很好,随着时间的推移,随着您添加新功能,千兆字节可能会不断增加。借助自动效果预算监控功能,您可以放心,因为系统会及时提醒您。
试试看
触发您的首个 bundlesize 测试
如需了解应用与性能预算的对比情况,请将代码添加到您在第 3 步中创建的 GitHub 代码库。
在 Glitch 中,依次点击工具 > Git、导入和导出 > 导出到 GitHub。
在弹出式窗口中,输入您的 GitHub 用户名和代码库名称(即
username/repo
)。Glitch 会将您的应用导出到名为“glitch”的新分支。点击代码库首页上的新建拉取请求按钮,创建新的拉取请求。
现在,您会在拉取请求页面上看到正在进行的状态检查。
所有检查很快就会完成。很遗憾,猫咪投票应用有点臃肿,未能通过性能预算检查。主软件包为 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 以构建新的软件包文件。
点击工具按钮。
然后点击控制台按钮。系统会在另一个标签页中打开控制台。
在控制台中,输入
webpack
并等待其完成构建。依次选择 Tools(工具)> Git、Import 和 Export(Git、导入和导出)> Export to GitHub(导出到 GitHub),将代码导出到 GitHub。
前往 GitHub 上的拉取请求页面,等待所有检查完成。
大功告成!软件包的新大小为 125.5 KB,并且已通过所有检查。🎉
与 Firebase 不同,导入 moment 库的部分内容并不容易,但值得一试。如需了解如何进一步优化应用,请参阅“移除未使用的代码”Codelab。
监控
应用现在的预算已低于预期,一切顺利。Travis CI 和 bundlesize 会持续监控性能预算,确保您的应用保持快速加载。