bundlesize

npm install bundlesize --save-dev

# or

yarn add bundlesize --dev

Add it to your scripts in package.json

"scripts": {
  "test": "bundlesize"
}

Or you can use it with npx from NPM 5.2+.

npx bundlesize

bundlesize accepts an array of files to check.

[
  {
    "path": "./build/vendor.js",
    "maxSize": "30 kB"
  },
  {
    "path": "./build/chunk-*.js",
    "maxSize": "10 kB"
  }
]

You can keep this array either in

package.json

{
  "name": "your cool library",
  "version": "1.1.2",
  "bundlesize": [
    {
      "path": "./build/vendor.js",
      "maxSize": "3 kB"
    }
  ]
}

or in a separate file

bundlesize.config.json

Format:

{
  "files": [
    {
      "path": "./dist.js",
      "maxSize": "3 kB"
    }
  ]
}

You can give a different file by using the --config flag:

bundlesize --config configs/bundlesize.json

If your repository is hosted on GitHub, you can set bundlesize up to create a "check" on every pull request.

build status

Currently works with 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 5 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}
CI=true usually set automtically in CI enviroments

(Ask me for help if you're stuck)

bundlesize can also be used without creating a configuration file. We do not recommend this approach and it might be deprecated in a future version.

bundlesize -f "dist/*.js" -s 20kB

For more granular configuration, we recommend configuring it in the package.json (documented above).

Contributors