@wpe-tkpd/bundlesize

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 from NPM 5.2+.

npx bundlesize

 

Configuration

 

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
  

 

Customisation

 

• 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.

   

• Compression options

  By default, bundlesize gzips your build files before comparing.

  If you are using brotli instead of gzip, you can specify that with each file:

  {
    "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 (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
• 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