# bundlesize
> Keep your library size in check
Latest version **0.18.2** (published 2024-03-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install bundlesize
pnpm add bundlesize
yarn add bundlesize
bun add bundlesize
```
Provides the commands `bundlesize`, `bundlesize-init`, `bundlesize-pipe`.
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 0.18.2 |
| Published | 2024-03-15 |
| First published | 2017-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 22.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4470 |
| Author | siddharthkp |
| Maintainers | siddharthkp |
| Keywords | library, size, check, build, maxSize |
## Links
- npm: https://www.npmjs.com/package/bundlesize
- Repository: https://github.com/siddharthkp/bundlesize
- Homepage: https://github.com/siddharthkp/bundlesize#readme
- Issues: https://github.com/siddharthkp/bundlesize/issues
- npm.io page: https://npm.io/package/bundlesize
## Dependencies (10)
- [glob](https://npm.io/package/glob.md) ^7.1.4
- [axios](https://npm.io/package/axios.md) ^1.6.2
- [bytes](https://npm.io/package/bytes.md) ^3.1.0
- [ci-env](https://npm.io/package/ci-env.md) ^1.4.0
- [commander](https://npm.io/package/commander.md) ^2.20.0
- [gzip-size](https://npm.io/package/gzip-size.md) ^4.0.0
- [prettycli](https://npm.io/package/prettycli.md) ^1.4.3
- [brotli-size](https://npm.io/package/brotli-size.md) 0.1.0
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^5.2.1
- [github-build](https://npm.io/package/github-build.md) ^1.2.4
## Alternatives
- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads
## Recent versions
- 0.18.2 (latest) — 2024-03-15
- 1.0.0-beta.2 (beta) — 2019-07-09
- 0.18.1 — 2021-01-07
- 1.0.0-beta.1 — 2019-07-09
- 0.18.0 — 2019-06-29
- 0.17.2 — 2019-05-21
- 0.17.1 — 2019-01-15
- 0.17.0 — 2018-03-24
- 0.16.0 — 2018-01-31
- 0.15.3 — 2017-10-15
- 0.15.2 — 2017-10-05
- 0.15.1 — 2017-10-04
- 0.15.0 — 2017-10-04
- 0.14.4 — 2017-09-03
- 0.14.3 — 2017-08-30
- … 36 more at https://npm.io/package/bundlesize/versions
## README
Keep your bundle size in check
[](https://travis-ci.org/siddharthkp/bundlesize)
[](https://npmjs.org/package/bundlesize)
[](https://www.npmjs.com/package/bundlesize)
#### Setup
```sh
npm install bundlesize --save-dev
# or
yarn add bundlesize --dev
```
#### Usage
Add it to your scripts in `package.json`
```json
"scripts": {
"test": "bundlesize"
}
```
Or you can use it with `npx` from [NPM 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
```sh
npx bundlesize
```
#### Configuration
`bundlesize` accepts an array of files to check.
```json
[
{
"path": "./build/vendor.js",
"maxSize": "30 kB"
},
{
"path": "./build/chunk-*.js",
"maxSize": "10 kB"
}
]
```
You can keep this array either in
1. `package.json`
```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:
```json
{
"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](https://github.com/isaacs/node-glob) to specify files.
This is common if you append a hash to the name or use a tool like create-react-app/nextjs.
```json
{
"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:
```json
{
"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:
```json
{
"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](https://travis-ci.org), [CircleCI](https://circleci.com/), [Wercker](http://www.wercker.com), and [Drone](http://readme.drone.io/).
- [Authorize `bundlesize` for status access](https://github.com/login/oauth/authorize?scope=repo%3Astatus&client_id=6756cb03a8d6528aca5a), 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](https://jenkins.io/) 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.
```sh
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](CONTRIBUTING.md)
#### Featured on [Totally tooling tips](https://www.youtube.com/watch?v=Da6VxdGU2Ig) and [Chrome Dev Summit](https://www.youtube.com/watch?v=_srJ7eHS3IM)!!
#### who uses bundlesize?
- [bootstrap](https://github.com/twbs/bootstrap)
- [lighthouse](https://github.com/GoogleChrome/lighthouse)
- [styled-components](https://github.com/styled-components/styled-components)
- [emotion](https://github.com/tkh44/emotion)
- [glamorous](https://github.com/paypal/glamorous)
- [Popper.js](https://github.com/FezVrasta/popper.js)
- [react-apollo](https://github.com/apollographql/react-apollo)
- [hyperapp](https://github.com/hyperapp/hyperapp)
- [css-constructor](https://github.com/siddharthkp/css-constructor)
- [redux-saga](https://github.com/redux-saga/redux-saga)
- [micromodal](https://github.com/ghosh/micromodal)
- [unistore](https://github.com/developit/unistore)
- [ngxs](https://github.com/ngxs/store)
#### TODO
- Work with other CI tools
- [AppVeyor](https://www.appveyor.com/) ([#234](https://github.com/siddharthkp/bundlesize/issues/234))
- Automate setup (setting env_var)
#### similar projects
- [BuildSize](https://buildsize.org/) - GitHub App, no manual configuration required
- [travis-weigh-in](https://github.com/danvk/travis-weigh-in) - Uses Python rather than Node.js
- [size-limit](https://github.com/ai/size-limit) - Uses webpack, builds your files for you.
## Contributors
This project exists thanks to all the people who contribute. [[Contribute]](CONTRIBUTING.md).
#### license
MIT © [siddharthkp](https://github.com/siddharthkp)
---
_Source: https://npm.io/package/bundlesize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._