Keep your bundle size in check

Setup

npm install bundlesize --save-dev

or
yarn add bundlesize --dev

Usage

Add it to your scripts in

package.json

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

Or you can use it with

npx

npx bundlesize

Configuration

bundlesize

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

You can keep this array either in

1. package.json

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

or in a separate file

1. bundlesize.config.json

Format:

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

You can give a different file by using the

--config

   bundlesize --config configs/bundlesize.json

Customisation

1. Fuzzy matching

If the names of your build files are not predictable, you can use the glob pattern to specify files.

This is common if you append a hash to the name or use a tool like create-react-app/nextjs.

   {
     "files": [
       {
         "path": "build/**/main-*.js",
         "maxSize": "5 kB"
       },
       {
         "path": "build/**/*.chunk.js",
         "maxSize": "50 kB"
       }
     ]
   }

It will match multiple files if necessary and create a new row for each file.

1. Compression options

By default, bundlesize

gzips

If you are using

brotli

   {
     "files": [
       {
         "path": "./build/vendor.js",
         "maxSize": "5 kB",
         "compression": "brotli"
       }
     ]
   }

If you do not use any compression before sending your files to the client, you can switch compression off:

   {
     "files": [
       {
         "path": "./build/vendor.js",
         "maxSize": "5 kB",
         "compression": "none"
       }
     ]
   }

Build status for GitHub

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

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 automatically in CI environments

(Ask me for help if you're stuck)

Usage with CLI

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

Like it?

:star: this repo

How to contribute?

• CONTRIBUTING.md

Featured on Totally tooling tips and Chrome Dev Summit!!

who uses bundlesize?

• bootstrap
• lighthouse
• styled-components
• emotion
• glamorous
• Popper.js
• react-apollo
• hyperapp
• css-constructor
• redux-saga
• micromodal
• unistore
• ngxs

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