将 bundlesize 与 Travis CI 搭配使用，可让您以最少的设置定义性能预算，并在开发工作流程中强制执行这些预算。Travis CI 是一项服务，可在您每次将代码推送到 GitHub 时在云端运行应用测试。您可以配置代码库，使其不允许合并拉取请求，除非软件包大小测试已通过。
Bundlesize 的 GitHub 检查包括与主分支的大小比较，以及在大小大幅增加时发出警告。
为了让您了解它的实际效果，我们提供了一个与 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 上。
授权 bundlesize 在拉取请求中发布内容
Bundlesize 需要获得授权才能在 pull 请求中发布内容，因此请访问此链接以获取将存储在 Travis 配置中的 bundlesize 令牌。
在项目的 Travis 界面中，依次前往更多选项 > 设置 > 环境变量。
添加一个新环境变量，并将令牌作为值字段，BUNDLESIZE_GITHUB_TOKEN 作为名称。
您需要做的最后一件事是创建一个 .travis.yml 文件，该文件会告知 Travis CI 要执行的操作。为了加快速度，该文件已包含在项目中，并且指定应用使用的是 NodeJS。
完成此步骤后，您就已完成所有设置，如果 JavaScript 超出预算，bundlesize 会向您发出警告。即使您一开始做得很好，随着时间的推移，当您添加新功能时，千字节数也会不断增加。借助自动性能预算监控，您可以放心，因为系统会及时发现并通知您。
试试看
触发您的第一个 bundlesize 测试
如需了解应用与性能预算的对比情况，请将代码添加到您在第 3 步中创建的 GitHub 代码库。
在 Glitch 中，依次点击 Tools > Git, Import, and Export > Export to 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 软件包，其中包含的不仅仅是 Database（Auth、存储、消息传递等）。
如需修正此问题，请在 src/index.js 文件中仅导入应用所需的软件包：
import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';
重新运行测试
由于源文件已更新，您需要运行 webpack 来构建新的 bundle 文件。
点击工具按钮。
然后，点击控制台按钮。系统会在另一个标签页中打开控制台。
在控制台中，输入
webpack，然后等待其完成构建。依次前往工具 > Git、导入和导出 > 导出到 GitHub，将代码导出到 GitHub。
前往 GitHub 上的拉取请求页面，并等待所有检查完成。
大功告成！新软件包的大小为 125.5 KB，并且已通过所有检查。 🎉
与 Firebase 不同，导入部分 moment 库并不容易，但值得一试。如需了解如何进一步优化应用，请参阅移除未使用的代码 Codelab。
监控
该应用的支出现在低于预算，一切正常。Travis CI 和 bundlesize 会持续监控性能预算，确保您的应用保持快速运行。