{"id":13397996,"url":"https://github.com/ai/size-limit","last_synced_at":"2025-09-09T21:00:39.506Z","repository":{"id":37733047,"uuid":"95340099","full_name":"ai/size-limit","owner":"ai","description":"Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.","archived":false,"fork":false,"pushed_at":"2025-03-21T14:19:35.000Z","size":5738,"stargazers_count":6703,"open_issues_count":26,"forks_count":1812,"subscribers_count":38,"default_branch":"main","last_synced_at":"2025-05-05T20:51:54.376Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ai"}},"created_at":"2017-06-25T05:18:40.000Z","updated_at":"2025-05-05T13:14:45.000Z","dependencies_parsed_at":"2024-05-16T18:29:16.928Z","dependency_job_id":"2ce0974b-eefe-446c-800d-5bc30b60e0a7","html_url":"https://github.com/ai/size-limit","commit_stats":{"total_commits":1150,"total_committers":92,"mean_commits":12.5,"dds":"0.13913043478260867","last_synced_commit":"22c14ee94dfe6de7f178a283b317bb05b69c82ea"},"previous_names":[],"tags_count":175,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai%2Fsize-limit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai%2Fsize-limit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai%2Fsize-limit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ai%2Fsize-limit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ai","download_url":"https://codeload.github.com/ai/size-limit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954409,"owners_count":21830902,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T18:02:00.707Z","updated_at":"2025-05-13T11:03:47.142Z","avatar_url":"https://github.com/ai.png","language":"JavaScript","readme":"# Size Limit [![Cult Of Martians][cult-img]][cult]\n\n\u003cimg src=\"https://ai.github.io/size-limit/logo.svg\" align=\"right\"\n     alt=\"Size Limit logo by Anton Lovchikov\" width=\"120\" height=\"178\"\u003e\n\nSize Limit is a performance budget tool for JavaScript. It checks every commit\non CI, calculates the real cost of your JS for end-users and throws an error\nif the cost exceeds the limit.\n\n* **ES modules** and **tree-shaking** support.\n* Add Size Limit to **GitHub Actions**, **Circle CI** or another CI system\n  to know if a pull request adds a massive dependency.\n* **Modular** to fit different use cases: big JS applications\n  that use their own bundler or small npm libraries with many files.\n* Can calculate **the time** it would take a browser\n  to download and **execute** your JS. Time is a much more accurate\n  and understandable metric compared to the size in bytes.\n  Additionally, you can [customize time plugin] via config\n  for every check with network speed, latency and so on.\n* Calculations include **all dependencies and polyfills**\n  used in your JS.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./img/example.png\" alt=\"Size Limit CLI\" width=\"738\"\u003e\n\u003c/p\u003e\n\nWith **[GitHub action]** Size Limit will post bundle size changes as a comment\nin pull request discussion.\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/andresz1/size-limit-action/master/assets/pr.png\"\n  alt=\"Size Limit comment in pull request about bundle size changes\"\n  width=\"686\" height=\"289\"\u003e\n\u003c/p\u003e\n\nWith `--why`, Size Limit can tell you *why* your library is of this size\nand show the real cost of all your internal dependencies.\nWe are using [Statoscope] for this analysis.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./img/why.png\" alt=\"Statoscope example\" width=\"650\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://evilmartians.com/?utm_source=size-limit\"\u003e\n    \u003cimg src=\"https://evilmartians.com/badges/sponsored-by-evil-martians.svg\"\n         alt=\"Sponsored by Evil Martians\" width=\"236\" height=\"54\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n[GitHub action]: https://github.com/andresz1/size-limit-action\n[Statoscope]:    https://github.com/statoscope/statoscope\n[cult-img]:      http://cultofmartians.com/assets/badges/badge.svg\n[cult]:          http://cultofmartians.com/tasks/size-limit-config.html\n[customize time plugin]: https://github.com/ai/size-limit/packages/time#customize-network-speed\n\n## Who Uses Size Limit\n\n* [MobX](https://github.com/mobxjs/mobx)\n* [Material-UI](https://github.com/callemall/material-ui)\n* [Ant Design](https://github.com/ant-design/ant-design/)\n* [Autoprefixer](https://github.com/postcss/autoprefixer)\n* [PostCSS](https://github.com/postcss/postcss) reduced\n  [25% of the size](https://github.com/postcss/postcss/commit/150edaa42f6d7ede73d8c72be9909f0a0f87a70f).\n* [Browserslist](https://github.com/browserslist/browserslist) reduced\n  [25% of the size](https://github.com/browserslist/browserslist/commit/640b62fa83a20897cae75298a9f2715642531623).\n* [EmojiMart](https://github.com/missive/emoji-mart) reduced\n  [20% of the size](https://github.com/missive/emoji-mart/pull/111)\n* [nanoid](https://github.com/ai/nanoid) reduced\n  [33% of the size](https://github.com/ai/nanoid/commit/036612e7d6cc5760313a8850a2751a5e95184eab).\n* [React Focus Lock](https://github.com/theKashey/react-focus-lock) reduced\n  [32% of the size](https://github.com/theKashey/react-focus-lock/pull/48).\n* [Logux](https://github.com/logux) reduced\n  [90% of the size](https://github.com/logux/logux-client/commit/62b258e20e1818b23ae39b9c4cd49e2495781e91).\n\n\n## How It Works\n\n1. Size Limit contains a CLI tool, 3 plugins (`file`, `webpack`, `time`)\n   and 3 plugin presets for popular use cases (`app`, `big-lib`, `small-lib`).\n   A CLI tool finds plugins in `package.json` and loads the config.\n2. If you use the `webpack` plugin, Size Limit will bundle your JS files into\n   a single file. It is important to track dependencies and webpack polyfills.\n   It is also useful for small libraries with many small files and without\n   a bundler.\n3. The `webpack` plugin creates an empty webpack project, adds your library\n   and looks for the bundle size difference.\n4. The `time` plugin compares the current machine performance with that of\n   a low-priced Android devices to calculate the CPU throttling rate.\n5. Then the `time` plugin runs headless Chrome (or desktop Chrome if it’s\n   available) to track the time a browser takes to compile and execute your JS.\n   Note that these measurements depend on available resources and might\n   be unstable. [See here](https://github.com/mbalabash/estimo/issues/5)\n   for more details.\n\n\n## Usage\n\n### JS Applications\n\nSuitable for applications that have their own bundler and send the JS bundle\ndirectly to a client (without publishing it to npm). Think of a user-facing app\nor website, like an email client, a CRM, a landing page or a blog with\ninteractive elements, using React/Vue/Svelte lib or vanilla JS.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eShow instructions\u003c/b\u003e\u003c/summary\u003e\n\n1. Install the preset:\n\n    ```sh\n    npm install --save-dev size-limit @size-limit/file\n    ```\n\n2. Add the `size-limit` section and the `size` script to your `package.json`:\n\n    ```diff\n    + \"size-limit\": [\n    +   {\n    +     \"path\": \"dist/app-*.js\"\n    +   }\n    + ],\n      \"scripts\": {\n        \"build\": \"webpack ./webpack.config.js\",\n    +   \"size\": \"npm run build \u0026\u0026 size-limit\",\n        \"test\": \"vitest \u0026\u0026 eslint .\"\n      }\n    ```\n\n3. Here’s how you can get the size for your current project:\n\n    ```sh\n    $ npm run size\n\n      Package size: 30.08 kB with all dependencies, minified and brotlied\n    ```\n\n4. Now, let’s set the limit. Add 25% to the current total size and use that as\n   the limit in your `package.json`:\n\n    ```diff\n      \"size-limit\": [\n        {\n    +     \"limit\": \"35 kB\",\n          \"path\": \"dist/app-*.js\"\n        }\n      ],\n    ```\n\n5. Add the `size` script to your test suite:\n\n    ```diff\n      \"scripts\": {\n        \"build\": \"webpack ./webpack.config.js\",\n        \"size\": \"npm run build \u0026\u0026 size-limit\",\n    -   \"test\": \"vitest \u0026\u0026 eslint .\"\n    +   \"test\": \"vitest \u0026\u0026 eslint . \u0026\u0026 npm run size\"\n      }\n    ```\n\n6. If you don’t have a continuous integration service running, don’t forget\n   to add one — start with GitHub Actions.\n\n\u003c/details\u003e\n\n\n### JS Application and Time-based Limit\n\nFile size limit (in kB) is not the best way to describe your JS application\ncost for developers. Developers will compare the size of the JS bundle\nwith the size of images. But browsers need much more time to parse 100 kB\nof JS than 100 kB of an image since JS compilers are very complex.\n\nThis is why Size Limit support time-based limit. It runs headless Chrome\nto track the time a browser takes to compile and execute your JS.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eShow instructions\u003c/b\u003e\u003c/summary\u003e\n\n1. Install the preset:\n\n    ```sh\n    npm install --save-dev size-limit @size-limit/preset-app\n    ```\n\n2. Add the `size-limit` section and the `size` script to your `package.json`:\n\n    ```diff\n    + \"size-limit\": [\n    +   {\n    +     \"path\": \"dist/app-*.js\"\n    +   }\n    + ],\n      \"scripts\": {\n        \"build\": \"webpack ./webpack.config.js\",\n    +   \"size\": \"npm run build \u0026\u0026 size-limit\",\n        \"test\": \"vitest \u0026\u0026 eslint .\"\n      }\n    ```\n\n3. Here’s how you can get the size for your current project:\n\n    ```sh\n    $ npm run size\n\n      Package size: 30.08 kB with all dependencies, minified and brotlied\n      Loading time: 602 ms   on slow 3G\n      Running time: 214 ms   on Snapdragon 410\n      Total time:   815 ms\n    ```\n\n4. Now, let’s set the limit. Add 25% to the current total time and use that as\n   the limit in your `package.json`:\n\n    ```diff\n      \"size-limit\": [\n        {\n    +     \"limit\": \"1 s\",\n          \"path\": \"dist/app-*.js\"\n        }\n      ],\n    ```\n\n5. Add the `size` script to your test suite:\n\n    ```diff\n      \"scripts\": {\n        \"build\": \"webpack ./webpack.config.js\",\n        \"size\": \"npm run build \u0026\u0026 size-limit\",\n    -   \"test\": \"vitest \u0026\u0026 eslint .\"\n    +   \"test\": \"vitest \u0026\u0026 eslint . \u0026\u0026 npm run size\"\n      }\n    ```\n\n6. If you don’t have a continuous integration service running, don’t forget\n   to add one — start with GitHub Actions.\n\n\u003c/details\u003e\n\n\n### Big Libraries\n\nJS libraries \u003e 10 kB in size.\n\nThis preset includes headless Chrome, and will measure your lib’s execution\ntime. You likely don’t need this overhead for a small 2 kB lib, but for larger\nones the execution time is a more accurate and understandable metric that\nthe size in bytes. Libraries like [React] are good examples for this preset.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eShow instructions\u003c/b\u003e\u003c/summary\u003e\n\n1. Install preset:\n\n    ```sh\n    npm install --save-dev size-limit @size-limit/preset-big-lib\n    ```\n\n2. Add the `size-limit` section and the `size` script to your `package.json`:\n\n    ```diff\n    + \"size-limit\": [\n    +   {\n    +     \"path\": \"dist/react.production-*.js\"\n    +   }\n    + ],\n      \"scripts\": {\n        \"build\": \"webpack ./scripts/rollup/build.js\",\n    +   \"size\": \"npm run build \u0026\u0026 size-limit\",\n        \"test\": \"vitest \u0026\u0026 eslint .\"\n      }\n    ```\n\n3. If you use ES modules you can test the size after tree-shaking with `import`\n   option:\n\n    ```diff\n      \"size-limit\": [\n        {\n          \"path\": \"dist/react.production-*.js\",\n    +     \"import\": \"{ createComponent }\"\n        }\n      ],\n    ```\n\n4. Here’s how you can get the size for your current project:\n\n    ```sh\n    $ npm run size\n\n      Package size: 30.08 kB with all dependencies, minified and brotlied\n      Loading time: 602 ms   on slow 3G\n      Running time: 214 ms   on Snapdragon 410\n      Total time:   815 ms\n    ```\n\n5. Now, let’s set the limit. Add 25% to the current total time and use that\n   as the limit in your `package.json`:\n\n    ```diff\n      \"size-limit\": [\n        {\n    +     \"limit\": \"1 s\",\n          \"path\": \"dist/react.production-*.js\"\n        }\n      ],\n    ```\n\n6. Add a `size` script to your test suite:\n\n    ```diff\n      \"scripts\": {\n        \"build\": \"rollup ./scripts/rollup/build.js\",\n        \"size\": \"npm run build \u0026\u0026 size-limit\",\n    -   \"test\": \"vitest \u0026\u0026 eslint .\"\n    +   \"test\": \"vitest \u0026\u0026 eslint . \u0026\u0026 npm run size\"\n      }\n    ```\n\n7. If you don’t have a continuous integration service running, don’t forget\n   to add one — start with GitHub Actions.\n8. Add the library size to docs, it will help users to choose your project:\n\n    ```diff\n      # Project Name\n\n      Short project description\n\n      * **Fast.** 10% faster than competitor.\n    + * **Small.** 15 kB (minified and brotlied).\n    +   [Size Limit](https://github.com/ai/size-limit) controls the size.\n    ```\n\n\u003c/details\u003e\n\n\n### Small Libraries\n\nJS libraries \u003c 10 kB in size.\n\nThis preset will only measure the size, without the execution time, so it’s\nsuitable for small libraries. If your library is larger, you likely want\nthe Big Libraries preset above. [Nano ID] or [Storeon] are good examples\nfor this preset.\n\n\u003cdetails\u003e\u003csummary\u003e\u003cb\u003eShow instructions\u003c/b\u003e\u003c/summary\u003e\n\n1. First, install `size-limit`:\n\n    ```sh\n    npm install --save-dev size-limit @size-limit/preset-small-lib\n    ```\n\n2. Add the `size-limit` section and the `size` script to your `package.json`:\n\n    ```diff\n    + \"size-limit\": [\n    +   {\n    +     \"path\": \"index.js\"\n    +   }\n    + ],\n      \"scripts\": {\n    +   \"size\": \"size-limit\",\n        \"test\": \"vitest \u0026\u0026 eslint .\"\n      }\n    ```\n\n3. Here’s how you can get the size for your current project:\n\n    ```sh\n    $ npm run size\n\n      Package size: 177 B with all dependencies, minified and brotlied\n    ```\n\n4. If your project size starts to look bloated, run `--why` for analysis:\n\n    ```sh\n    npm run size -- --why\n    ```\n\n    \u003e We use [Statoscope](https://github.com/statoscope/statoscope) as bundle analyzer.\n\n5. Now, let’s set the limit. Determine the current size of your library,\n   add just a little bit (a kilobyte, maybe) and use that as the limit\n   in your `package.json`:\n\n    ```diff\n     \"size-limit\": [\n        {\n    +     \"limit\": \"9 kB\",\n          \"path\": \"index.js\"\n        }\n     ],\n    ```\n\n6. Add the `size` script to your test suite:\n\n    ```diff\n      \"scripts\": {\n        \"size\": \"size-limit\",\n    -   \"test\": \"vitest \u0026\u0026 eslint .\"\n    +   \"test\": \"vitest \u0026\u0026 eslint . \u0026\u0026 npm run size\"\n      }\n    ```\n\n7. If you don’t have a continuous integration service running, don’t forget\n   to add one — start with GitHub Actions.\n8. Add the library size to docs, it will help users to choose your project:\n\n    ```diff\n      # Project Name\n\n      Short project description\n\n      * **Fast.** 10% faster than competitor.\n    + * **Small.** 500 bytes (minified and brotlied). No dependencies.\n    +   [Size Limit](https://github.com/ai/size-limit) controls the size.\n    ```\n\n\u003c/details\u003e\n\n[Storeon]: https://github.com/ai/storeon/\n[Nano ID]: https://github.com/ai/nanoid/\n[React]: https://github.com/facebook/react/\n\n\n## Reports\n\nSize Limit has a [GitHub action] that comments and rejects pull requests based\non Size Limit output.\n\n1. Install and configure Size Limit as shown above.\n2. Add the following action inside `.github/workflows/size-limit.yml`\n\n```yaml\nname: \"size\"\non:\n  pull_request:\n    branches:\n      - master\njobs:\n  size:\n    runs-on: ubuntu-latest\n    env:\n      CI_JOB_NUMBER: 1\n    steps:\n      - uses: actions/checkout@v1\n      - uses: andresz1/size-limit-action@v1\n        with:\n          github_token: ${{ secrets.GITHUB_TOKEN }}\n```\n\n\n## Config\n\n### Plugins and Presets\n\nPlugins or plugin presets will be loaded automatically from `package.json`.\nFor example, if you want to use `@size-limit/webpack`, you can just use\n`npm install --save-dev @size-limit/webpack`, or you can use our preset\n`@size-limit/preset-big-lib`.\n\nPlugins:\n\n* `@size-limit/file` checks the size of files with Brotli (default), Gzip\n  or without compression.\n* `@size-limit/webpack` adds your library to empty webpack project\n  and prepares bundle file for `file` plugin.\n* `@size-limit/webpack-why` adds reports for `webpack` plugin\n  about your library is of this size to show the cost of all your\n  dependencies.\n* `@size-limit/webpack-css` adds css support for `webpack` plugin.\n* `@size-limit/esbuild` is like `webpack` plugin, but uses `esbuild`\n  to be faster and use less space in `node_modules`.\n* `@size-limit/esbuild-why` add reports for `esbuild` plugin\n  about your library is of this size to show the cost of all your\n  dependencies.\n* `@size-limit/time` uses headless Chrome to track time to execute JS.\n\nPlugin presets:\n\n* `@size-limit/preset-app` contains `file` and `time` plugins.\n* `@size-limit/preset-big-lib` contains `webpack`, `file`, and `time` plugins.\n* `@size-limit/preset-small-lib` contains `esbuild` and `file` plugins.\n\n\n#### Third-Party Plugins\n\nThird-party plugins and presets named starting with `size-limit-` are also supported.\nFor example:\n\n* [`size-limit-node-esbuild`](https://github.com/un-ts/size-limit/tree/main/packages/node-esbuild)\n  is like `@size-limit/esbuild` but for Node libraries.\n* [`size-limit-preset-node-lib`](https://github.com/un-ts/size-limit/tree/main/packages/preset-node-lib)\n  is like `@size-limit/preset-small-lib` but for Node libraries which contains\n  above `node-esbuild` and core `file` plugins.\n* [`nx-size-limit`](https://github.com/LironHazan/nx-size-limit)\n  is an [NX](https://nx.dev/community) build system community plugin.\n\n\n### Limits Config\n\nSize Limits supports three ways to define limits config.\n\n1. `size-limit` section in `package.json`:\n\n   ```json\n     \"size-limit\": [\n       {\n         \"path\": \"index.js\",\n         \"import\": \"{ createStore }\",\n         \"limit\": \"500 ms\"\n       }\n     ]\n   ```\n\n2. or a separate `.size-limit.json` config file:\n\n   ```js\n   [\n     {\n       \"path\": \"index.js\",\n       \"import\": \"{ createStore }\",\n       \"limit\": \"500 ms\"\n     }\n   ]\n   ```\n\n3. or a more flexible `.size-limit.js` or `.size-limit.cjs` config file:\n\n   ```js\n   module.exports = [\n     {\n       path: \"index.js\",\n       import: \"{ createStore }\",\n       limit: \"500 ms\"\n     }\n   ]\n   ```\n\n4. or types `.size-limit.ts`:\n\n   ```ts\n   import type { SizeLimitConfig } from '../../packages/size-limit'\n\n   module.exports = [\n     {\n       path: \"index.js\",\n       import: \"{ createStore }\",\n       limit: \"500 ms\"\n     }\n   ] satisfies SizeLimitConfig\n   ```\n\nEach section in the config can have these options:\n\n* **path**: relative paths to files. The only mandatory option.\n  It could be a path `\"index.js\"`, a [pattern] `\"dist/app-*.js\"`\n  or an array `[\"index.js\", \"dist/app-*.js\", \"!dist/app-exclude.js\"]`.\n* **import**: partial import to test tree-shaking. It could be `\"{ lib }\"`\n  to test `import { lib } from 'lib'`, `*` to test all exports,\n  or `{ \"a.js\": \"{ a }\", \"b.js\": \"{ b }\" }` to test multiple files.\n* **limit**: size or time limit for files from the `path` option. It should be\n  a string with a number and unit, separated by a space.\n  Format: `100 B`, `10 kB`, `500 ms`, `1 s`.\n* **name**: the name of the current section. It will only be useful\n  if you have multiple sections.\n* **message**: an optional custom message to display additional information,\n  such as guidance for resolving errors, relevant links, or instructions\n  for next steps when a limit is exceeded.\n* **entry**: when using a custom webpack config, a webpack entry could be given.\n  It could be a string or an array of strings.\n  By default, the total size of all entry points will be checked.\n* **webpack**: with `false` it will disable webpack.\n* **running**: with `false` it will disable calculating running time.\n* **gzip**: with `true` it will use Gzip compression and disable\n  Brotli compression.\n* **brotli**: with `false` it will disable any compression.\n* **config**: a path to a custom webpack config.\n* **ignore**: an array of files and dependencies to exclude from\n  the project size calculation.\n* **modifyWebpackConfig**: (.size-limit.js only) function that can be used\n  to do last-minute changes to the webpack config, like adding a plugin.\n* **compareWith**: path to `stats.json` from another build to compare\n  (when `--why` is using).\n* **uiReports**: custom UI reports list (see [Statoscope docs]).\n\nIf you use Size Limit to track the size of CSS files, make sure to set\n`webpack: false`. Otherwise, you will get wrong numbers, because webpack\ninserts `style-loader` runtime (≈2 kB) into the bundle.\n\nAlso, you avoid having a config and pass the limit to CLI:\n\n```sh\nnpm install --save-dev @size-limit/file\nnpx size-limit --limit \"10 kB\" dist/bundle.js\n```\n\nAdditionally, you can specify a custom path to your configuration file when running the CLI:\n\n```sh\nnpx size-limit --config configs/size-limit.json\n```\n\n[Statoscope docs]: https://github.com/statoscope/statoscope/tree/master/packages/webpack-plugin#optionsreports-report\n[pattern]: https://github.com/SuperchupuDev/tinyglobby\n\n## Analyze with `--why`\n\nYou can run `size-limit --why` to analyze the bundle.\n\nYou will need to install `@size-limit/esbuild-why` or `@size-limit/webpack-why`\ndepends on which bundler you are using (default is `esbuild`).\n\nFor `@size-limit/esbuild-why`,\nit will generate a `esbuild-why.html` at the current directory \u0026 open it in the browser.\n\nIf you also specify `--save-bundle \u003cDIR\u003e`,\nthe report will be generated inside `\u003cDIR\u003e`.\n\nIf you have multiple sections in your config,\nthe files will be named `esbuild-why-{n}.html`,\nor you can give it a custom name:\n\n```jsonc\n[\n  {\n    \"name\": \"cjs\",\n    /* snap */\n  },\n  {\n    \"name\": \"esm\",\n    /* snap */\n  }\n]\n```\n\nThis will produce `esbuild-why-cjs.html` and `esbuild-why-esm.html` respectively.\n\nFor `@size-limit/webpack-why`,\nit will generate the report and open it in the browser automatically.\n\n## JS API\n\n```js\nconst sizeLimit = require('size-limit')\nconst filePlugin = require('@size-limit/file')\nconst webpackPlugin = require('@size-limit/webpack')\n\nsizeLimit([filePlugin, webpackPlugin], [filePath]).then(result =\u003e {\n  result //=\u003e { size: 12480 }\n})\n```\n","funding_links":["https://github.com/sponsors/ai"],"categories":["JavaScript","Performance Monitoring","Clear description","\u003e 3k ★","Examples","others","Continuous Integration","Build Tools","Веб-разработка","Build Tools to set up performance budget","Package management and publishing","Deep Learning Method"],"sub_categories":["References","Less uncommon words","GitHub Actions","React Components","Server-rendered React","FeedBack"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai%2Fsize-limit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fai%2Fsize-limit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fai%2Fsize-limit/lists"}