bundlesize

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

 

1) Add the path and maxSize in your package.json.

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.

Using a different CI? You will need to supply an additional 4 environment variables.

• CI_REPO_OWNER given the repo https://github.com/myusername/myrepo would be myusername
• CI_REPO_NAME given the repo https://github.com/myusername/myrepo would be myrepo
• CI_COMMIT_MESSAGE the commit message
• CI_COMMIT_SHA the SHA of the CI commit, in Jenkins you would use ${env.GIT_COMMIT}

(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?

:star: this repo

 

how to contribute?

• CONTRIBUTING.md

 

Featured on Totally tooling tips and Chrome Dev Summit!!

 

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 (#234)
• 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