Keep watch of your bundle size
npm install @zhigang1992/bundlewatch[![npm][npm]][npm-url]
[![bundlewatch][bundlewatch]][bundlewatch-url]

[![node][node]][node-url]
[![deps][deps]][deps-url]
[![dev-deps][dev-deps]][dev-deps-url]
[![builds][builds]][builds-url]
[![test][test]][test-url]
BundleWatch checks file sizes, ensuring bundled browser assets don't jump in file size.
Sharp increases in BundleWatch can signal that something is wrong - adding a package that bloats the slug, a wrong import, or forgetting to minify.
Inspired by Siddharth Kshetrapal bundlesize
npm install bundlewatch --save-devyarn add bundlewatch --devAdd some basic configuration to your package.json
``json`
{
"name": "my package name",
"version": "0.0.1",
"bundlewatch" : {
"files": [
{
"path": "myfolder/*.js",
"maxSize": "100kB"
}
]
}
}
Usage:
- NPM: npm run bundlewatchyarn run bundlewatch
- Yarn:
This will give you command line output. If you want BundleWatch to report build status on your pull requests, see below.

You will need to give BundleWatch access to your GitHub Statuses, which can be done by heading to:
https://service.bundlewatch.io/setup-github
This will give you your
BUNDLEWATCH_GITHUB_TOKEN. You will need to set this as an environment variable in CI.
CI Variables Needed by BundleWatch:
The most efficient way to get this running is to ensure that some environment variables are available for BundleWatch to find.
- CI_REPO_OWNER github.com/facebook/react
- CI_REPO_NAME github.com/facebook/react
- CI_COMMIT_SHA
- CI_BRANCH`If you're using, _Travis_, _CircleCI_, _Wrecker_, _Drone_ or _GitHub Actions_ these should all work out of the box.
> Have a look at the source code to see which variables are automatically found: https://github.com/bundlewatch/bundlewatch/blob/master/src/app/config/getCIVars.js

Thanks goes to these wonderful people (emoji key):
Jake Bolam 💻 | Shouvik DCosta 💻 | Tyler Benning 🎨 | Leila Rosenthal 📖 | Francois Campbell 💻 | Emmanuel Ogbizi 🚧 💻 🛡️ | Pascal Iske 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
[npm]: https://img.shields.io/npm/v/bundlewatch.svg
[npm-url]: https://npmjs.com/package/bundlewatch
[node]: https://img.shields.io/node/v/bundlewatch.svg
[node-url]: https://nodejs.org
[bundlewatch]: https://img.shields.io/badge/bundle-watched-blue.svg
[bundlewatch-url]: https://bundlewatch.io
[deps]: https://david-dm.org/bundlewatch/bundlewatch/status.svg
[deps-url]: https://david-dm.org/bundlewatch/bundlewatch
[dev-deps]: https://david-dm.org/bundlewatch/bundlewatch/dev-status.svg
[dev-deps-url]: https://david-dm.org/bundlewatch/bundlewatch?type=dev
[test]: https://coveralls.io/repos/github/bundlewatch/bundlewatch/badge.svg?branch=master
[test-url]: https://coveralls.io/github/bundlewatch/bundlewatch?branch=master
[builds]: https://img.shields.io/circleci/project/github/bundlewatch/bundlewatch/master.svg
[builds-url]: https://circleci.com/gh/bundlewatch/bundlewatch