Size Limit

Calculate the real cost to run your JS app or lib to keep good performance....

Performance
ai/size-limitsize-limit

README

Size Limit [![Cult Of Martians][cult-img]][cult]


<img src="https://ai.github.io/size-limit/logo.svg" align="right"
     alt="Size Limit logo by Anton Lovchikov" width="120" height="178">

Size Limit is a performance budget tool for JavaScript. It checks every commit
on CI, calculates the real cost of your JS for end-users and throws an error
if the cost exceeds the limit.

ES modules and tree-shaking support.
Add Size Limit to Travis CI, Circle CI, GitHub Actions
  or another CI system to know if a pull request adds a massive dependency.
Modular to fit different use cases: big JS applications
  that use their own bundler or small npm libraries with many files.
Can calculate the time it would take a browser
  to download and execute your JS. Time is a much more accurate
  and understandable metric compared to the size in bytes.
Calculations include all dependencies and polyfills
  used in your JS.

Size Limit CLI


With [GitHub action] Size Limit will post bundle size changes as a comment
in pull request discussion.

<img src="https://raw.githubusercontent.com/andresz1/size-limit-action/master/assets/pr.png"
  alt="Size Limit comment in pull request about bundle size changes"
  width="686" height="289">


With --why, Size Limit can tell you why your library is of this size
and show the real cost of all your internal dependencies.
We are using [Statoscope] for this analysis.

Statoscope example

    <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
         alt="Sponsored by Evil Martians" width="236" height="54">


[GitHub action]: https://github.com/andresz1/size-limit-action
[Statoscope]:    https://github.com/statoscope/statoscope
[cult-img]:      http://cultofmartians.com/assets/badges/badge.svg
[cult]:          http://cultofmartians.com/tasks/size-limit-config.html

Who Uses Size Limit


MobX
Material-UI
Autoprefixer
PostCSS reduced
  25% of the size.
Browserslist reduced
  25% of the size.
EmojiMart reduced
  20% of the size
nanoid reduced
  33% of the size.
React Focus Lock reduced
  32% of the size.
Logux reduced
  90% of the size.


How It Works


1. Size Limit contains a CLI tool, 3 plugins (file, webpack, time)
   and 3 plugin presets for popular use cases (app, big-lib, small-lib).
   A CLI tool finds plugins in package.json and loads the config.
2. If you use the webpack plugin, Size Limit will bundle your JS files into
   a single file. It is important to track dependencies and webpack polyfills.
   It is also useful for small libraries with many small files and without
   a bundler.
3. The webpack plugin creates an empty webpack project, adds your library
   and looks for the bundle size difference.
4. The time plugin compares the current machine performance with that of
   a low-priced Android devices to calculate the CPU throttling rate.
5. Then the time plugin runs headless Chrome (or desktop Chrome if it’s
   available) to track the time a browser takes to compile and execute your JS.
   Note that these measurements depend on available resources and might
   be unstable. See here
   for more details.


Usage


JS Applications


Suitable for applications that have their own bundler and send the JS bundle
directly to a client (without publishing it to npm). Think of a user-facing app
or website, like an email client, a CRM, a landing page or a blog with
interactive elements, using React/Vue/Svelte lib or vanilla JS.

Show instructions

1. Install the preset:

  1. ```sh
  2.     $ npm install --save-dev size-limit @size-limit/file
  3. ```

2. Add the size-limit section and the size script to your package.json:

  1. ```diff
  2.     + "size-limit": [
  3.     +   {
  4.     +     "path": "dist/app-*.js"
  5.     +   }
  6.     + ],
  7.       "scripts": {
  8.         "build": "webpack ./webpack.config.js",
  9.     +   "size": "npm run build && size-limit",
  10.         "test": "jest && eslint ."
  11.       }
  12. ```

3. Here’s how you can get the size for your current project:

  1. ```sh
  2.     $ npm run size

  4.       Package size: 30.08 kB with all dependencies, minified and gzipped
  5. ```

4. Now, let’s set the limit. Add 25% to the current total size and use that as
   the limit in your package.json:

  1. ```diff
  2.       "size-limit": [
  3.         {
  4.     +     "limit": "35 kB",
  5.           "path": "dist/app-*.js"
  6.         }
  7.       ],
  8. ```

5. Add the size script to your test suite:

  1. ```diff
  2.       "scripts": {
  3.         "build": "webpack ./webpack.config.js",
  4.         "size": "npm run build && size-limit",
  5.     -   "test": "jest && eslint ."
  6.     +   "test": "jest && eslint . && npm run size"
  7.       }
  8. ```

6. If you don’t have a continuous integration service running, don’t forget
   to add one — start with [Travis CI].



JS Application and Time-based Limit


File size limit (in kB) is not the best way to describe your JS application
cost for developers. Developers will compare the size of the JS bundle
with the size of images. But browsers need much more time to parse 100 kB
of JS than 100 kB of an image since JS compilers are very complex.

This is why Size Limit support time-based limit. It runs headless Chrome
to track the time a browser takes to compile and execute your JS.

Show instructions

1. Install the preset:

  1. ```sh
  2.     $ npm install --save-dev size-limit @size-limit/preset-app
  3. ```

2. Add the size-limit section and the size script to your package.json:

  1. ```diff
  2.     + "size-limit": [
  3.     +   {
  4.     +     "path": "dist/app-*.js"
  5.     +   }
  6.     + ],
  7.       "scripts": {
  8.         "build": "webpack ./webpack.config.js",
  9.     +   "size": "npm run build && size-limit",
  10.         "test": "jest && eslint ."
  11.       }
  12. ```

3. Here’s how you can get the size for your current project:

  1. ```sh
  2.     $ npm run size

  4.       Package size: 30.08 kB with all dependencies, minified and gzipped
  5.       Loading time: 602 ms   on slow 3G
  6.       Running time: 214 ms   on Snapdragon 410
  7.       Total time:   815 ms
  8. ```

4. Now, let’s set the limit. Add 25% to the current total time and use that as
   the limit in your package.json:

  1. ```diff
  2.       "size-limit": [
  3.         {
  4.     +     "limit": "1 s",
  5.           "path": "dist/app-*.js"
  6.         }
  7.       ],
  8. ```

5. Add the size script to your test suite:

  1. ```diff
  2.       "scripts": {
  3.         "build": "webpack ./webpack.config.js",
  4.         "size": "npm run build && size-limit",
  5.     -   "test": "jest && eslint ."
  6.     +   "test": "jest && eslint . && npm run size"
  7.       }
  8. ```

6. If you don’t have a continuous integration service running, don’t forget
   to add one — start with [Travis CI].



Big Libraries


JS libraries > 10 kB in size.

This preset includes headless Chrome, and will measure your lib’s execution
time. You likely don’t need this overhead for a small 2 kB lib, but for larger
ones the execution time is a more accurate and understandable metric that
the size in bytes. Libraries like [React] are good examples for this preset.

Show instructions

1. Install preset:

  1. ```sh
  2.     $ npm install --save-dev size-limit @size-limit/preset-big-lib
  3. ```

2. Add the size-limit section and the size script to your package.json:

  1. ```diff
  2.     + "size-limit": [
  3.     +   {
  4.     +     "path": "dist/react.production-*.js"
  5.     +   }
  6.     + ],
  7.       "scripts": {
  8.         "build": "webpack ./scripts/rollup/build.js",
  9.     +   "size": "npm run build && size-limit",
  10.         "test": "jest && eslint ."
  11.       }
  12. ```

3. If you use ES modules you can test the size after tree-shaking with import
   option:

  1. ```diff
  2.       "size-limit": [
  3.         {
  4.           "path": "dist/react.production-*.js",
  5.     +     "import": "{ createComponent }"
  6.         }
  7.       ],
  8. ```

4. Here’s how you can get the size for your current project:

  1. ```sh
  2.     $ npm run size

  4.       Package size: 30.08 kB with all dependencies, minified and gzipped
  5.       Loading time: 602 ms   on slow 3G
  6.       Running time: 214 ms   on Snapdragon 410
  7.       Total time:   815 ms
  8. ```

5. Now, let’s set the limit. Add 25% to the current total time and use that
   as the limit in your package.json:

  1. ```diff
  2.       "size-limit": [
  3.         {
  4.     +     "limit": "1 s",
  5.           "path": "dist/react.production-*.js"
  6.         }
  7.       ],
  8. ```

6. Add a size script to your test suite:

  1. ```diff
  2.       "scripts": {
  3.         "build": "rollup ./scripts/rollup/build.js",
  4.         "size": "npm run build && size-limit",
  5.     -   "test": "jest && eslint ."
  6.     +   "test": "jest && eslint . && npm run size"
  7.       }
  8. ```

7. If you don’t have a continuous integration service running, don’t forget
   to add one — start with [Travis CI].
8. Add the library size to docs, it will help users to choose your project:

  1. ```diff
  2.       # Project Name

  4.       Short project description

  6.       * **Fast.** 10% faster than competitor.
  7.     + * **Small.** 15 kB (minified and gzipped).
  8.     +   [Size Limit](https://github.com/ai/size-limit) controls the size.
  9. ```



Small Libraries


JS libraries < 10 kB in size.

This preset will only measure the size, without the execution time, so it’s
suitable for small libraries. If your library is larger, you likely want
the Big Libraries preset above. [Nano ID] or [Storeon] are good examples
for this preset.

Show instructions

1. First, install size-limit:

  1. ```sh
  2.     $ npm install --save-dev size-limit @size-limit/preset-small-lib
  3. ```

2. Add the size-limit section and the size script to your package.json:

  1. ```diff
  2.     + "size-limit": [
  3.     +   {
  4.     +     "path": "index.js"
  5.     +   }
  6.     + ],
  7.       "scripts": {
  8.     +   "size": "size-limit",
  9.         "test": "jest && eslint ."
  10.       }
  11. ```

3. Here’s how you can get the size for your current project:

  1. ```sh
  2.     $ npm run size

  4.       Package size: 177 B with all dependencies, minified and gzipped
  5. ```

4. If your project size starts to look bloated, run --why for analysis:

  1. ```sh
  2.     $ npm run size -- --why
  3. ```

    > We use Statoscope as bundle analyzer.

6. Now, let’s set the limit. Determine the current size of your library,
   add just a little bit (a kilobyte, maybe) and use that as the limit
   in your package.json:

  1. ```diff
  2.      "size-limit": [
  3.         {
  4.     +     "limit": "9 kB",
  5.           "path": "index.js"
  6.         }
  7.      ],
  8. ```

7. Add the size script to your test suite:

  1. ```diff
  2.       "scripts": {
  3.         "size": "size-limit",
  4.     -   "test": "jest && eslint ."
  5.     +   "test": "jest && eslint . && npm run size"
  6.       }
  7. ```

8. If you don’t have a continuous integration service running, don’t forget
   to add one — start with [Travis CI].
9. Add the library size to docs, it will help users to choose your project:

  1. ```diff
  2.       # Project Name

  4.       Short project description

  6.       * **Fast.** 10% faster than competitor.
  7.     + * **Small.** 500 bytes (minified and gzipped). No dependencies.
  8.     +   [Size Limit](https://github.com/ai/size-limit) controls the size.
  9. ```


[Travis CI]: https://github.com/dwyl/learn-travis
[Storeon]: https://github.com/ai/storeon/
[Nano ID]: https://github.com/ai/nanoid/
[React]: https://github.com/facebook/react/


Reports


Size Limit has a [GitHub action] that comments and rejects pull requests based
on Size Limit output.

1. Install and configure Size Limit as shown above.
2. Add the following action inside .github/workflows/size-limit.yml

  1. ```yaml
  2. name: "size"
  3. on:
  4.   pull_request:
  5.     branches:
  6.       - master
  7. jobs:
  8.   size:
  9.     runs-on: ubuntu-latest
  10.     env:
  11.       CI_JOB_NUMBER: 1
  12.     steps:
  13.       - uses: actions/checkout@v1
  14.       - uses: andresz1/size-limit-action@v1
  15.         with:
  16.           github_token: ${{ secrets.GITHUB_TOKEN }}
  17. ```


Config


Plugins and Presets


Plugins or plugin presets will be loaded automatically from package.json.
For example, if you want to use @size-limit/webpack, you can just use
npm install --save-dev @size-limit/webpack, or you can use our preset
@size-limit/preset-big-lib.

Plugins:

@size-limit/file checks the size of files with Gzip, Brotli
  or without compression.
@size-limit/webpack adds your library to empty webpack project
  and prepares bundle file for file plugin.
@size-limit/webpack-why adds reports for webpack plugin
  about your library is of this size to show the cost of all your
  dependencies.
@size-limit/webpack-css adds css support for webpack plugin.
@size-limit/esbuild is like webpack plugin, but uses esbuild
  to be faster and use less space in node_modules.
@size-limit/time uses headless Chrome to track time to execute JS.
@size-limit/dual-publish compiles files to ES modules with [dual-publish]
  to check size after tree-shaking.

Plugin presets:

@size-limit/preset-app contains file and time plugins.
@size-limit/preset-big-lib contains webpack, file, and time plugins.
@size-limit/preset-small-lib contains esbuild and file plugins.

[dual-publish]: https://github.com/ai/dual-publish


Third-Party Plugins


Third-party plugins and presets named start with size-limit- are also supported.
For example:

[size-limit-node-esbuild](https://github.com/un-ts/size-limit/tree/main/packages/node-esbuild)
  is like @size-limit/esbuild but for Node libraries.
[size-limit-preset-node-lib](https://github.com/un-ts/size-limit/tree/main/packages/preset-node-lib)
  is like @size-limit/preset-small-lib but for Node libraries which contains
  above node-esbuild and core file plugins.


Limits Config


Size Limits supports three ways to define limits config.

1. size-limit section in package.json:

  1. ``` json
  2.      "size-limit": [
  3.        {
  4.          "path": "index.js",
  5.          "import": "{ createStore }",
  6.          "limit": "500 ms"
  7.        }
  8.      ]
  9. ```

2. or a separate .size-limit.json config file:

  1. ``` js
  2.    [
  3.      {
  4.        "path": "index.js",
  5.        "import": "{ createStore }",
  6.        "limit": "500 ms"
  7.      }
  8.    ]
  9. ```

3. or a more flexible .size-limit.js or .size-limit.cjs config file:

  1. ``` js
  2.    module.exports = [
  3.      {
  4.        path: "index.js",
  5.        import: "{ createStore }",
  6.        limit: "500 ms"
  7.      }
  8.    ]
  9. ```

Each section in the config can have these options:

path: relative paths to files. The only mandatory option.
  It could be a path "index.js", a [pattern] "dist/app-*.js"
  or an array ["index.js", "dist/app-*.js", "!dist/app-exclude.js"].
import: partial import to test tree-shaking. It could be "{ lib }"
  to test import { lib } from 'lib', * to test all exports,
  or { "a.js": "{ a }", "b.js": "{ b }" } to test multiple files.
limit: size or time limit for files from the path option. It should be
  a string with a number and unit, separated by a space.
  Format: 100 B, 10 kB, 500 ms, 1 s.
name: the name of the current section. It will only be useful
  if you have multiple sections.
entry: when using a custom webpack config, a webpack entry could be given.
  It could be a string or an array of strings.
  By default, the total size of all entry points will be checked.
webpack: with false it will disable webpack.
running: with false it will disable calculating running time.
gzip: with false it will disable gzip compression.
brotli: with true it will use brotli compression and disable
  gzip compression.
config: a path to a custom webpack config.
ignore: an array of files and dependencies to exclude from
  the project size calculation.
modifyWebpackConfig: (.size-limit.js only) function that can be used
  to do last-minute changes to the webpack config, like adding a plugin.
compareWith: path to stats.json from another build to compare
  (when --why is using).
uiReports: custom UI reports list (see [Statoscope docs]).

If you use Size Limit to track the size of CSS files, make sure to set
webpack: false. Otherwise, you will get wrong numbers, because webpack
inserts style-loader runtime (≈2 kB) into the bundle.

[Statoscope docs]: https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin#optionsreports-report
[pattern]: https://github.com/sindresorhus/globby#globbing-patterns


JS API


  1. ``` js
  2. const sizeLimit = require('size-limit')
  3. const filePlugin = require('@size-limit/file')
  4. const webpackPlugin = require('@size-limit/webpack')

  6. sizeLimit([filePlugin, webpackPlugin], [filePath]).then(result => {
  7.   result //=> { size: 12480 }
  8. })
  9. ```