siddharthkp / bundlesize

Keep your bundle size in check

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

1. package.json

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

   or in a separate file

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

 

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.

    

2. 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?

⭐ 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

bundlesize's Issues

500 error?

https://travis-ci.org/FezVrasta/popper.js/builds/256016144#L1702

Ideas?

Shouldn't `yarn.lock` be ignored?

As in remove the .?

bundlesize/.gitignore

Line 61 in 5b7d079

.yarn.lock

Is the bundlesize-store.now.sh service open source?

I'm curious to see how it works.

Support webpack filenames that include chunkhash

We output our asset files using webpack with a filename like [name]-[chunkhash].js; this looks like amo-581f1494a4fa6d00f237.js. Is there a way to use bundlesize to track this? I couldn't think of a way to do this from your README.

`threshold null gzip` error

I've noticed that the docs use maxSize in the config, since the tagged release hasn't happened yet to change the internals to use maxSize it uses threshold instead. Giving an error like this

./dist/assets/es5.min.js: 65.19kB > threshold null gzip

To fix change the property in your package.json to from maxSize to threshold.

Just popping this here for anyone getting the error.

Provide proper auth integration for Enterprise users

Hello,

I'm looking to use this package with an enterprise deployment of CircleCI. Is there a reason you aren't using the GitHub API to do proper auth and status checks on builds? I don't mind running this as a command post yarn, but I still would like to have the status check if possible on our PRs in GitHub enterprise.

Alternatively, is there a way I could set this to have our Circle job push the status to GitHub based on results this provides?

Looking forward to hearing from you guys. Would be great to have this ability!

Error: Request failed with status code 500

Hi, we're trying to set up bundlesize with our CI but on every build we're seeing this Error: Request failed with status code 500.

This is what it's complaining about:

data: '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<title>Error</title>\n</head>\n<body>\n<pre>Error: Firebase.child failed: First argument was an invalid path: &quot;5b6276128b031ac95462607a8060cfe85b60ca1c/Onlaw/onlaw.dk&quot;. Paths must be non-empty strings and can&#39;t contain &quot;.&quot;, &quot;#&quot;, &quot;$&quot;, &quot;[&quot;, or &quot;]&quot;<br> &nbsp; &nbsp;at Sd (/home/nowuser/src/node_modules/firebase/database-node.js:106:59)<br> &nbsp; &nbsp;at U.h.n (/home/nowuser/src/node_modules/firebase/database-node.js:247:178)<br> &nbsp; &nbsp;at Og.h.gf (/home/nowuser/src/node_modules/firebase/database-node.js:184:552)<br> &nbsp; &nbsp;at get (/home/nowuser/src/firebase.js:33:30)<br> &nbsp; &nbsp;at server.get (/home/nowuser/src/index.js:20:5)<br> &nbsp; &nbsp;at Layer.handle (/home/nowuser/src/node_modules/express/lib/router/layer.js:95:5)<br> &nbsp; &nbsp;at Layer.wrapped (/home/nowuser/src/node_modules/newrelic/lib/transaction/tracer/index.js:184:28)<br> &nbsp; &nbsp;at Layer.wrappedLayerHandleRequest [as handle_request] (/home/nowuser/src/node_modules/newrelic/lib/instrumentation/express.js:364:14)<br> &nbsp; &nbsp;at next (/home/nowuser/src/node_modules/express/lib/router/route.js:137:13)<br> &nbsp; &nbsp;at Route.dispatch (/home/nowuser/src/node_modules/express/lib/router/route.js:112:3)</pre>\n</body>\n</html>\n'

Our GH repo does have a dot in the name but since popper.js is listed as currently using bundlesize I've assumed that this isn't the real cause of the issue here?

Add a Slack team

Hi guys,

I was thinking about creating a slack team to chat with more ease than on Github issue especially to know more each other, ask question / help or welcome new people 😄

Please tell me what you think about that 👍

Add prettier as a precommit hook

Now that we have multiple collaborators on the repo, it will be useful to add a prettier pre-commit hook to maintain consistency.

This is how you can setup a pre-commit hook: https://www.npmjs.com/package/prettier#pre-commit-hook

My favorite config is: prettier --write --single-quote --no-semi, but I'm open to whatever the majority feels comfortable with 😄

Thanks to @okonet for lint-staged and @typicode for husky!

size badge?

I know there are already services that provide badges with the bundle size, but I think there's market for a dedicated "bundlesize" badge which may provide more informations compared to the classic ones.

For instance, it would be super cool to have the badge link to a page that keeps track of the size variations during time.

bundlesize.ci from GitHub auth request doesn't resolve

When bundlesize requests read/write access via GitHub, the application metadata lists https://bundlesize.ci which does not resolve. Maybe that link needs to be updated?

Comparison with master does not work

Hi,

I installed bundlesize in a travis CI build script but it does not output master nor in the detail or in the success message.

Here the part of the script for bundlesize

/* eslint-disable no-console */

const Build = require('github-build');

const data = {
  repo: process.env.TRAVIS_REPO_SLUG,
  sha: process.env.TRAVIS_COMMIT,
  token: process.env.BUNDLESIZE_GITHUB_TOKEN,
  label: 'bundlesize',
  description: 'Check application size',
};

/* Create a build */
const build = new Build(data);

/* When you call start, a pending status get's added on github (returns a promise) */
build
  .pass()
  .then(() => console.log('Check if a pending status was added'))
  .catch(response => console.log(response.status, response.error.message));

Do you have any idea ?

Thank you ! 😄

Multiple packages can be too long to parse for GUI

We are moving to a lerna repo with Apollo and setup 5 filesize tests. With the current link generation, the UI fails to parse the JSON (it appears to be cut off). Example Link

I'd be happy to PR a change to encode it differently if desired

Notify on bundle size *decrease*?

Let's say bundle.js starts at 50KB, so we set threshold to 55KB. Then, some incredible PR comes in and reduces the bundle to 40KB -- that's great! 😃 But, now our threshold is still at 55KB 😢

Ideally we'd like to know about this and be reminded to update the bundlesize threshold to something better, like 45KB, for example.

Thoughts?

Become a github tool

I would love to use this as a tool for most of my repositories even the ones that are not written in js.
Would it be possible to transform this tool into something that would appear here https://github.com/marketplace similar to the Travis CI or Codacy.

For example I would love to use this to get updates on bundlesize in a repository with shell scripts but don't want to add node modules to the project just to accomplish this (just adds to the bundlesize I am trying to keep as low as possible).

[Discussion] Updating CONTRIBUTING.md

Note: This is not a issue actually but more of a open discussion regarding a contributing workflow.

I have been doing some Rnd on Fork-and-Branch Git Workflow and also on other sites and found that the basic workflow for adding a new feature to a forked repo is like:-

• Fork a GitHub repository. [Same as in our CONTRIBUTING.md ✔️ ]
• Clone the forked repository to your local system. ✔️
• Create a feature branch in which to place your changes. ❌
• Make your changes to the new branch. [Currently done on master ✔️ ]
• Commit the changes to the branch. [Currently done on master ✔️ ]
• Push the branch to GitHub. ✔️
• Open a pull request from the new branch to the original repo. ✔️

So, do you think it is a best practice to always make the new feature or experimental changes on a new branch? Should we update our CONTRIBUTING.md to reflect that too?

Regards!

Add Eslint to repo

Since we are using prettier for the precommit hook I think we should add eslint aswell.

I was thinking of adding:

• eslint-config-airbnb
• eslint-config-prettier
• eslint-plugin-compat
• eslint-plugin-import
• eslint-plugin-prettier

How does that sound ?

Server implementation of `api.set` seems to ignore multiple files

we currently include 4 separate file blocks in our bundlesize config.. when api.set(values) is executed with multiple files, only the first seems to be persisted.. our response for https://bundlesize-store-iothfynuyu.now.sh/values?repo=${environment.repo}&token=${environment.token} includes only the first item of that values array..

Support GitLab CI

https://docs.gitlab.com/ce/ci/

Personal: You guys are a little too awesome for me!

Hey!

Thanks for joining in and helping out on this repo!

Honestly I'm a little overwhelmed that all of you wanted to join and help out!

And the speed and excitement at which y'all are going is intoxicating!

I asked for help because I was feeling burned out by starting too many projects in a tiny span of time. I'm recharging my batteries by hanging out people I love and trying out new creative things.

I'm going to unwatch this repo for a tiny while (which means I'll not get a notification unless you @ tag you me, feel free to do so if you want)

I think all of you have merging rights, @SaraVieira has publishing rights on npm, be nice to her 😄

I'll be back stronger and more excited!

brb!

Show "in progress" status in PRs?

Right now I see the bundlesize report only when the PR is completed. I'd love to see it in "yellow" while the build is still proceeding.

Maybe add a bundlesize start command to run before any other build command to notify the PR about this check?

The test script would look like this:

"scripts": {
  // better command names are welcome 🙄
  "test": "bundlesize start && jest && bundlesize check"
}

Show test result for multiple files

I use bundlesize for my team's project and add multiple files for the testing.
Unfortunately we got simple log not the result for whole multiple files.

How about make it support for multiple file logging?

GZIP Sizes

First, thanks for this, this is great! ✨

Curious if you'd be open to a PR that would allow for reporting on GZIP sizes instead of/in addition to just the Disk Size kb? Perhaps using something like gzip-size

Why do you need access to my private repositories?

Hey there,

great tool, I'd love to but I can not use it:

My employer has also private, non-public code in the GitHub organization. I would love to use this tool's GitHub integration to display the bundle size nicely with every open source PR we get.

But, I am not allowed to activate the integration, since it ask's for full private repository access.

Why do you need that access by default? Is there a way to have a bundle-size which is only integrating with public repositories?

I am pretty sure most use-case here are opensource projects which will be public anyways.

Thank you very much,
Benedikt

Support for Jenkins

[Feature] Automate package publishing using semantic-release

Do you want to request a feature or report a bug?

• feature

What is the current behavior?

   npm version major
   git push origin master --tags
   npm publish

You manually decide what the next version is. You have to remember what major, minor and patch means. You have to remember to push both commits and tags. You have to wait for the CI to pass.

If the current behavior is a bug, please provide the steps to reproduce.

• NA

What is the expected behavior?

git commit -m "fix: <message>"
git push

You describe the changes you’ve made. A new version is automatically published with the correct version number.

If this is a feature request, what is motivation or use case for changing the behavior?

• Motivation: 📦 🚀 fully automated package publishing

Please mention other relevant information.

• node version: NA
• npm version: NA
• Operating system: NA
• bundlesize version: NA
• CI you are using: NA

Idea: Remove the need for Firebase store

I thought about the fact that the tool sends the bundle size information to a Firebase store to make comparisons across builds and how that can pull off possible users. I then began to search for alternatives - and I think I have found one:

For simple cli usage a run could simply store the result as a JSON file that compares against itself on rerun. Nothing special here.

When the tool is ran on a CI environment, it has to be configured in a way that this JSON result is stored in a opinionated or configured place in the build artifacts that then will be accessed via the CI tools API. With this in place we could compare against the latest master build or even compare against the target branch of a pull request.

With CircleCi this is a non issue. The API is in place and has all necessary endpoints to pull this of. But I'm not sure about travis. In my 5 minutes of googling I didn't find a way to easily access build artifacts other than a direct S3 connection. Do you have insights on this?

Cleaner Messsages from the package

For an example the code in files.js could be from

error('There is no matching file for ' + file.path, { silent: true })

to

error(`There is no matching file for ${file.path} in ${process.cwd()}`, { silent: true });

Makes it that much more simpler in terms of knowing where the current context runner is set to. makes it user friendly , i'd think.

Do make your comments on this.

I've made those changes as a part of different repo and can send PR if you think its worth adding.

Help in identifying reason for increase in size

Having insights into why is the library size growing would be really helpful. If the increase can be traced back to the source, it would be great.

As @ai puts it:

you need not only warning, but also reasons why library become bigger. Profiling is a key for optimization ;)

One of the possible solutions here is using webpack bundle analyser (again, thanks to @ai)

[feature request] Accept piped file

Why?
Would be super useful to have this in place so we could pipe in output of another program, i.e. one which strips down comments.

Im happy to help with implementing this, just reaching out first with the idea as suggested in CONTRIBUTING section ;)

Issue with 404s and repeat requests?

See this build, I'm unsure what's up...

bundle-buddy integration

It would be great to add bundle-buddy to bundlesize to give more insights into the bundle (which all packages are eating more and which package are using same resources.

@siddharthkp any suggestions?

Keep the size in check, without limiting it

I love easily keeping track of a build size, but I don't necessarily need a low limit (e.g. for a Web Extension) that would force us to make dumb choices (i.e. change the code to be lighter but less readable) just to get a ✅

I could set a high limit but seeing 30KB < 500KB threshold feels like it's a race to reach it 😄

What if it always passed the build and just showed careful, 30% larger than master so seemingly small dependencies can't fool us.

Automatically track all CircleCI artifacts

Rather than having to manually specify the files to track in the package.json, it would be nice to be able to automatically track all files that are saved as artifacts in CircleCI and compare them to the most recent master build.

Optimise the details page url format to fit more data

The details page url takes all the data in query params.

The url seems to be cut off at 835 characters which leaves about 797 characters for data. The current implementation is pretty naive. It stringifies the results object and passes it in the url. This works great for a few files (< 5?), but breaks after that.

A more compact format will help in supporting a bigger number of files.

code: reporter.js and store/index.js

Testing strategy

As we have bunch of contributors now, it might a good time to invest in some tests 😊

@Furizaa gave an amazing PR long back (#20), but I couldn't wrap my head around it completely and chickened out! 🐔 Sorry!

What would be a good testing strategy?

My go-to strategy for testing CLI tools has been to test the smaller functions by calling them with real files (Used this in cost-of-modules and auto-install)

For example: config.js reads config from a cli params and a file. We can create a test folder which is like a dummy app and test the whole flow one piece at a time.

CLI config

What are your thoughts on adding config via a CLI as an alternative to using package.json. We'd love to start using this on our apps but would rather not have to update each apps' package.json?

I'd be happy to attempt a PR but want to know your thoughts?

Add all-contributors to the repo

@kentcdodds made the coolest thing ever: all-contributors

• Add it the readme
• Add it to CONTRIBUTING.md

Could not add github status: 404 Not Found

I'm trying to use bundlesize without github integration. Is that possible? In other words, I haven't added a token but I thought I could still use the output to tell me if my bundle has reached the threshold or not.

I set up my TravisCI to run bundlesize in my build step. This worked fine in a branch but when I merged it to master it failed every time like this:

$ bundlesize
 ERROR  Could not add github status.
        404: Not Found 

error Command failed with exit code 1.

Here is an example of a failure: https://travis-ci.org/mozilla/addons-frontend/builds/262798345?utm_source=github_status&utm_medium=notification

How do you keep package-lock.json updated?

This project uses npm5's package-lock.json, I realised that a lot of folks use yarn or an older version of npm.

What this means is that you might not get the same dependencies on your machines.
Moreover, dependencies you add on npm4 will not get added to package-lock, this might lead to problems in CI which uses npm5 and will only install packages from package-lock (If I understand correctly, I might be wrong)

How do we get around this problem?

Support CircleCI

1. Create a file similar to the one for travis that holds variables for circle.

2. Decide which CI to pick based on environment variables set by them in build.js

Long bundle path causes truncation of text in GitHub UI

As you can see from the screenshot below

Perhaps only showing that last directory and the filename, prefixed with ... would be better, as the most useful information follows that. The full path could be shown when hovering over the summary.

If you have a solution in mind, I'd be happy to try and make the change for you. I'm guessing doing some path manipulation here would do it?

Update readme for todo list

Found that readme todo section mention about

work with other CI tools (circle, appveyor, etc.)

But, Circle CI is already working with this package, as mentioned:

Currently works for Travis CI, CircleCI, Wercker, and Drone.

So, please update the todo list, as found necessary for this repo.

Regards!

bundle name is unknown

Hey, I really like where this project is going. Thanks for doing it.

I want to ask if there's any way to deal with unknown bundle file names because I'm using webpack and my bundle files are hashes.
I also have another constraint: I currently generate 2 JS files - vendor and app specific.

Also, my test script is custom and has other commands how would I configure it to work with bundlesize?
Thanks

[Discussion] Adding a npm stats badge in readme

Note: This is not a issue actually but more of a open discussion regarding a new readme npm stats badge.

Hi Everyone,

Just wanted to know, if you guys think we can add a badge to show no. of downloads/month like:

If you click the badge, you can visit to npm-stat page which will show the full stats also. Currently we have around 12k downloads/month and I think we need to show this impressive stats to the world, right on the readme page.

What you guys think?

Regards!

Upgrade chalk to version 2.0.1

There is a newer version of chalk released that this project depends on.

Please update to latest and test it out.
Regards!

Globbing for filename

We tend to have a hash generated with filename, thus:
main-SOME_RANDOM_HASH.js

Remove the sourcemap comment from the size computation?

Currently it counts the sourcemap comment (if there is such) too.
These comments usually are around 20-40 bytes.

Guide for the contributors

I really want to contribute to this project and have an idea to improve some feature, because my team in Tapjoy started to use it for small project.
But I'm not sure how to build and test on my local machine. So it would be super helpful if you add some guide for the contributors.
And I appreciate for your effort!

More obvious name for upper limit/threshold

Threshold feels like it's the delta, whereas we need an absolute amount, max size?