size-limit

Size Limit is a tool that tracks how large your JavaScript code gets and stops your project from shipping if it crosses a threshold you set. You add it to your build process, define a size limit in kilobytes or as a time budget, and it will check each new commit or pull request against that limit. If someone adds a large dependency that pushes the bundle over the line, the check fails and the team knows before it reaches users.

The tool does not just count the raw bytes of your files. It bundles your code using webpack, includes all dependencies and any browser compatibility code that gets added automatically, then compresses the result the same way a web server would. This gives a realistic picture of what a user actually downloads, not just what the source files weigh. There is also a time-based mode that runs a headless browser and measures how long the browser takes to download, parse, and execute the JavaScript on a slow device. This is useful because JavaScript takes much longer to process than the same number of kilobytes in an image.

Setup involves installing one or two packages from npm and adding a small configuration block to your package.json. You specify which files to measure and what the limit is. The tool then integrates with GitHub Actions, CircleCI, or any other continuous integration system. There is a GitHub Action that posts a comment on each pull request showing exactly how much the bundle size changed.

The tool supports three modes: one for complete web applications that bundle their own code, one for large JavaScript libraries, and one for small libraries with many individual files. You pick the mode that matches your project. A --why flag produces a detailed breakdown showing which dependencies are responsible for the most size.

Well-known projects including PostCSS, MobX, nanoid, and Ant Design have used Size Limit to reduce their published sizes by 20 to 90 percent.