Using bundlesize with Travis CI lets you define performance budgets with minimal setup and enforce them as part of your development workflow. Travis CI is a service that runs tests for your app in the cloud every time you push code to GitHub. You can configure your repository so that it won't allow merging pull-requests unless the bundlesize tests have passed.
Bundlesize's GitHub checks include a size comparison to the master branch and a warning in case of a big jump in size.
Set the performance budget
This Glitch already contains bundlesize. To start, click the Remix to Edit button to make the project editable.
The main bundle of this app is in the public folder. To test its size, add the
following section to the
"maxSize": "170 kB"
set the performance budget to 170KB in the
Bundlesize supports glob patterns and the * wildcard character in the file path will match all bundle names in the public folder.
Create a test script
Since Travis needs a test to run, add a test script to
"start": "webpack && http-server -c-1",
Set up continuous integration
Integrate GitHub and Travis CI
First, create a new repository for this project on your GitHub account and
initialize it with a
You'll need to register an account on Travis and activate GitHub Apps integration under the Settings section of your profile.
Once you have an account, go to Settings under your profile, click the Sync account button, and make sure your new repo is listed on Travis.
Authorize bundlesize to post on pull requests
Bundlesize needs authorization to be able to post on pull requests, so visit this link to get the bundlesize token that will be stored in the Travis configuration.
In your project's Travis dashboard, go to More options > Settings > Environment variables.
Add a new environment variable with the token as the value field and BUNDLESIZE_GITHUB_TOKEN as the name.
The last thing you need to kick-off continuous integration is a
file, which tells Travis CI what to do. To speed things up, it is already
included in the project and it specifies that the app is using NodeJS.
Try it out
Trigger your first bundlesize test
To see how the app stacks up against the performance budget, add the code to the GitHub repo that you created in step 3.
On Glitch, click Tools > Git, Import, and Export > Export to GitHub.
In the pop-up, enter your GitHub username and the name of the repo as
username/repo. Glitch will export your app to a new branch named "glitch".
Create a new pull request by clicking the New pull request button on the homepage of the repository.
You'll now see status checks in progress on the pull request page.
It won't take long until all checks are done. Unfortunately, the cat voting app is a bit bloated and does not pass the performance budget check. The main bundle is 266 KB and the budget is 170 KB.
Luckily, there are some easy performance wins you can make by
removing unused code. There are two main imports in
import firebase from "firebase";
import * as moment from 'moment';
The app is using Firebase Realtime Database to store the data, but it's importing the entire firebase package which consists of a lot more than just a database (auth, storage, messaging etc.).
Fix this by importing only the package that the app needs in the
import firebase from "firebase";
import firebase from 'firebase/app';
firebase/app import, which sets up the API surface for each of
the different services, is always required.
Since the source file has been updated, you need to run webpack to build the new bundle file.
Click the Tools button.
Then click the Console button. This will open the console in another tab.
In the console, type
webpackand wait for it to finish the build.
Export the code to GitHub from Tools > Git, Import, and Export > Export to GitHub.
Go to the pull request page on GitHub and wait for all checks to finish.
Success! The new size of the bundle is 125.5 KB and all the checks have passed. 🎉
Unlike Firebase, importing parts of the moment library cannot be done as easily, but it's worth a shot. Check out how you can further optimize the app in the Remove unused code codelab.
The app is now under the budget and all is well. Travis CI and bundlesize will keep monitoring the performance budget for you, making sure your app stays fast.