Keep your bundle size in check
minimal setup
npm install bundlesize --save-dev
usage
Add it to your scripts in package.json
"scripts": {
"test": "bundlesize"
}
Or you can use npx
with NPM 5.2+.
npx bundlesize
configuration
package.json
.
1) Add the path and maxSize in your By default the gzipped size is tested. You can use the compression
option to change this. (gzip
, brotli
, or none
).
{
"name": "your cool library",
"version": "1.1.2",
"bundlesize": [
{
"path": "./dist.js",
"maxSize": "3 kB"
}
]
}
bundlesize
also supports glob patterns
Example:
"bundlesize": [
{
"path": "./dist/vendor-*.js",
"maxSize": "3 kB"
},
{
"path": "./dist/chunk-*.js",
"maxSize": "3 kB"
}
]
This makes it great for using with applications that are bundled with another tool. It will match multiple files if necessary and create a new row for each file.
2) build status
Currently works for Travis CI, CircleCI, Wercker, and Drone.
-
Authorize
bundlesize
for status access, copy the token provided. - Add this token as
BUNDLESIZE_GITHUB_TOKEN
as environment parameter in your CIs project settings.
(Ask me for help if you're stuck)
CLI
example usage:
bundlesize -f "dist/*.js" -s 20kB
For more granular configuration, we recommend configuring it in the package.json
(documented above).
like it?
how to contribute?
Totally tooling tips and Chrome Dev Summit!!
Featured on
who uses bundlesize?
- bootstrap
- preact
- lighthouse
- styled-components
- emotion
- glamorous
- Popper.js
- react-apollo
- hyperapp
- css-constructor
- redux-saga
- micromodal
- unistore
TODO
- Work with other CI tools (AppVeyor, etc.)
- Automate setup (setting env_var)
similar projects
- BuildSize - GitHub App, no manual configuration required
- travis-weigh-in - Uses Python rather than Node.js
- size-limit - Uses webpack, builds your files for you.
Contributors
This project exists thanks to all the people who contribute. [Contribute].
license
MIT © siddharthkp