CHANGELOG
Change Log
This project adheres to Semantic Versioning.
13.0.3
- Removed
picocolorsdependencies.
13.0.2
- Fixed glob pattern regression.
13.0.1
- Fixed publishing process.
13.0.0
- Removed Node.js 20 support.
- Removed
tinyglobbyandjitidependencies. - Added npm provenance.
12.1.0
- Added
disablePluginsoption (by @JPeer264). - Updated
esbuild.
12.0.1
- Updated
css-minimizer-webpack-plugin(by @SevereCloud).
12.0.0
- Moved
jitito optional dependency. - Removed
chokidardependency in favor offs.watch. - Removed Node.js 18 support.
- Updated
open&esbuilddependencies. - Fixed docs (by @nlopin & @just-boris).
11.2.0
- Added
--configargument (by @EvgenyWas). - Added top-level
awaitsupport to config (by @aryaemami59). - Added
timeoption to config (by @EvgenyWas). - Added
messageoption to config (by @dartess). - Updated
esbuild.
11.1.6
- Updated
chokidar. - Updated
esbuild. - Updated
jiti.
11.1.5
- Reduced dependencies (by @ziebam).
- Updated
esbuild.
11.1.4
- Fixed types (by @aryaemami59).
11.1.3
- Updated
esbuild. - Updated CSS loaders for webpack.
11.1.2
- Fixed CSS support in esbuild plugin (by @just-boris).
11.1.1
- Fixed Windows support (by @aryaemami59).
11.1.0
- Added TypeScript support for config (by @aryaemami59).
- Fixed
webpack-whyregression (by @hoo00nn).
11.0.3
- Fixed
.mjsconfig support (by Arya Emami). - Updated
esbuild.
11.0.2
- Fixed
require is not definedregression. - Updated
esbuild-visualizer.
11.0.1
- Updated
estimo. - Updated
lilconfig.
11.0
- Moved to Brotli as default compression. Use
gzip: truefor old behavior.
10.0.3
- Fixed third-party plugins support (by @JounQin).
- Fixed Windows support (by @JounQin).
10.0.2
- Fixed
require is not definedinwebpack-css(by Andrey Medvedev). - Fixed webpack config defined as function support (by @lev875).
10.0.1
- Fixed imports and exports between packages.
10.0
- Removed
@size-limit/dual-publishplugin. - Moved projects to ESM (by @lev875).
Size Limit still can be used as CLI in CJS projects. - Updated
globbydependency.
9.0
- Remove Node.js 14 and 16 support.
- Moved to React from CDN for
timeplugin (by Aakansha Doshi).
8.2.6
- Fixed npm release process.
8.2.5
- Fixed opening report in
@size-limit/esbuild-why(by Yaroslav Chapelskyi). - Updated
esbuild.
8.2.4
- Fixed
@size-limit/esbuild-whyfor multiple checks (by Homa Wong).
8.2.3
- Fixed npm release process.
8.2.2
- Fixed npm release process.
8.2.1
- Fixed
@size-limit/esbuild-whypackage size.
8.2
- Added
@size-limit/esbuild-whyplugin (by Homa Wong). - Fixed peer dependency (by Sรฉbastien Vanvelthem).
8.1.2
- Fixed silent mode (by Igor Suvorov).
- Updated
esbuild. - Reduced dependencies.
8.1.1
- Updated
esbuild.
8.1
- Added
"*"value support toimport(by @denkristoffer).
8.0.1
- Fixed
configandmodifyEsbuildConfigoptions (by Angelo Ashmore). - Updated
esbuild.
8.0
- Removed Node.js 12 support.
- Added support for third-party plugins support (by @JounQin).
- Added field with limit to JSON output (by Elliot Westlake).
7.0.8
- Fixed peer dependencies.
7.0.7
- Fixed plugin versions in presets.
7.0.6
- Added
brotliednote to CLI output (by @azat-io). - Updated
nanospinner.
7.0.5
- Added
pnpmexamples to migration guide. - Fixed docs (by @azat-io).
7.0.4
- Updated
esbuild. - Updated
nanospinner.
7.0.3
- Fixed package size.
7.0.2
- Fixed peer dependency ignore in
@size-limit/esbuild.
7.0.1
- Fixed
--save-bundlearguments with@size-limit/esbuild. - Fixed
ignoreoption with@size-limit/esbuild. - Fixed
brotlioption without webpack. - Fixed error messages.
7.0
- Added
@size-limit/esbuildplugin for better performance (by Artem Tumin). - Moved
@size-limit/preset-small-libto@size-limit/esbuild. - Moved CSS from webpack plugin to
@size-limit/webpack-css(by Egor Ogarkov). - Moved
--whyto@size-limit/webpack-why(by Egor Ogarkov).
6.0.4
- Updated dependencies.
6.0.3
- Updated
nanospinner.
6.0.2
- Fixed Statoscope report location (by Sergey Melyukov).
6.0.1
- Replaced
mico-spinnertonanospinner.
6.0
- Moved to webpack 5 (by Ludovico Fischer).
- Moved from Webpack Bundle Analyzer to Statoscope (by Sergey Melyukov).
5.0.5
- Replaced
nanocolorsdependency withpicocolors.
5.0.4
- Replaced
colorettedependency withnanocolors.
5.0.3
- Fixed
pnpmsupport (by @Tomyail).
5.0.2
- Fixed error message on no input files for webpack.
- Fixed plugins loading from optional dependencies (by Edouard Menayde).
5.0.1
- Fixed
mico-spinnerdependency range.
5.0
- Removed Node.js 10 support.
- Reduced dependencies (by Stsefanovich Kanstantsin & @enemycnt).
4.12.0
- Added
.size-limit.cjsconfig file support (by Cole Ellison).
4.11.0
- Added
modifyWebpackConfigoption (by Lenz Weber).
4.10.3
- Updated
optimize-css-assets-webpack-plugin.
4.10.2
- Use
1000factor forKBand1024forKiB(by Matthias Kunnen).
4.10.1
- Fixed output on missed file (by Viktor Pasynok).
4.10
- Added
--silentargument (by Viktor Pasynok).
4.9.2
- Fixed plugin loading for mono repository (by John Grishin).
4.9.1
- Reduced dependencies by replacing
cosmiconfigtolilconfig.
4.9
- Added auto
--highlight-lessfor checks with bytes in limit. - Updated
dual-publish.
4.8
- Added webpack stats support in
--save-bundle(by Leonard Kinday).
4.7
- Added
--highlight-lessargument (by Victor Didenko).
4.6.2
- Fixed
peerDependenciesresolving inimport. - Fixed Node.js 15 support.
4.6.1
- Fixed
peerDependenciessupport inimport. - Fixed npm 7 support.
- Updated
css-loaderandfile-loader.
4.6
- Added
--hide-passedargument (by Kristjรกn Oddsson).
4.5.7
- Do not show loader in JSON mode (by Billy Vong).
4.5.6
- Fix โfile was not foundโ behaviour (by Pavel Pustovalov).
4.5.5
- Dropped Node.js 13.0-13.6 support because of ES modules bug in that versions.
4.5.4
- Better warning on missed value in CLI argument (by Mikhail Vyrodov).
4.5.3
- Fixed
MaxListenersExceededWarning(by Pavel Pustovalov). - Fixed
gzippednote (by Evgeniy Timokhov).
4.5.2
- Replace color output library.
4.5.1
- Reduce dependencies.
- Improve docs (by Mikhail Bashurov).
4.5
- Add
--clean-dirargument.
4.4.5
- Fix Windows support.
4.4.4
- Fix Yarn 2 support.
4.4.3
- Fix Windows support (by Anton Khlynovskiy).
4.4.2
- Update
nanoid.
4.4.1
- Update
file-loader. - Add peer dependency to
dual-publishplugin.
4.4
- Add
--watchsupport (by @jayhoney).
4.3.1
- Fix
importoption.
4.3
- Add multiple files support for
importoption. - Add multiple files support for
importoption.
4.2.1
- Fix
dual-publisherror.
4.2
- Add
@size-limit/dual-publishplugin.
4.1.1
- Fix
importoption.
4.1
- Add tree-shaking support with
importoption (by Brian Schlenker).
4.0.2
- Fix
gzipoption plugins test. - Update
ci-job-number.
4.0.1
- Fix note text (by Pavel Pustovalov).
4.0
- Move
size-limitfromdependenciestopeerDependencies.
3.0.1
- Add Yarn PnP and Yarn 2 support (by Pavel Pustovalov).
3.0
- Drop Node.js 8 support.
- Add Brotli support (by Viktor Pasynok).
2.2.4
- Improve
MaxListenersExceededWarningfix (by Pavel Pustovalov).
2.2.3
- Fix
MaxListenersExceededWarning(by Pavel Pustovalov).
2.2.2
- Fix JS API.
2.2.1
- Fix warning message (by Alexey Taktarov).
2.2
- Add JS API.
2.1.6
- Fix
--whyfor entries with exceeded limit. - Fix
--whyfor multiple entries.
2.1.5
- Fix running time calculation on parallel tasks.
- Fix CI warning text during Puppeteer error.
2.1.4
- Add warning for
size-limitin dependencies.
2.1.3
- Fix plugin loading (by Alexandr Antonov).
2.1.2
- Update dependencies.
2.1.1
- Ignore non
.jsor.mjsfiles in running time. - Speed up running time calculation.
2.1
- Add
--debugargument.
2.0.2
- Fix time limit support.
2.0.1
- Fix possible webpack temporal directory name conflict.
2.0
- Rewrite tool with modular architecture.
Migration:
- Update
size-limitto 2.x version. - Run
npx size-limit. - Console will output instructions for installing necessary preset.
1.3.8
- Do not download Chrome for Puppeteer if you already have desktop Chrome.
1.3.7
- More accurate
--why(by Anton Korzunov). - Fix
ignoreandpeerDependencies(by Anton Korzunov). - Fix
--no-gzipargument.
1.3.6
- Fix
package.json-less project support. - Improve error message on wrong
getSize()call. - Fix JSDoc.
1.3.5
- Fix CI warning text.
1.3.4
- Fix CI warning style.
1.3.3
- Fix ignoring scoped packages.
1.3.2
- Fix support extension-less
package.main(by Homa Wong). - Add warning or Circle CI.
1.3.1
- Speed up running time calculation.
1.3
- Add
--save-bundleargument (by Ivan Solovev).
1.2
- Add
--jsonargument (by Pavel Vostrikov).
1.1.2
- Fix running time calculation on
webpack: false.
1.1.1
- Allow to use Size Limit on CI with Node.js <8 tasks.
1.1
- Calculate time to download and execute JS.
- Improve CLI UI.
1.0.1
- Fix Markdown files support (by Scaria Rex Arun and Kiryl Misachenka).
1.0
- Add
.size-limit.jsonconfig name support.
0.22
- Drop Node.js 6 support.
- Update inner CLI tools.
0.21.1
- Use
css-loader2.0 (by Redmond Tran). - Use
file-loader3.0.
0.21
- Add support for dynamic filename in custom Webpack config (by Naijia Liu).
- Add
entryoption (by Naijia Liu).
0.20.1
- Use
compression-webpack-plugin2.0. - Use
webpack-bundle-analyzer3.0.
0.20
- Use
package.json#mainas default path for limit. - Fix custom webpack config support with
resolveorresolveLoaderoptions.
0.19.3
- Update
file-loaderandstyle-loader.
0.19.2
- Fix
ignoreoption (by Jayden Seric).
0.19.1
- Use
style-loader0.22.
0.19
- Add
ignoreoption to config.
0.18.5
- Fix absolute path support.
0.18.4
- Update dependencies.
- Fix documentation.
0.18.3
- Use
read-pkg-up4.x. - Remove development config from
package.json.
0.18.2
- Fix size with new webpack.
0.18.1
- Move development config files from npm package.
0.18
- Add
.size-limit.jsconfig support (by Olivier Tassinari).
0.17.1
- Use
cosmiconfig5.x. - Improve CI (by Daniel Ruf).
0.17
- Remove deprecated limit CLI API and add
--limitargument.
0.16.2
- Fix
peerDependenciesand--why(by Bogdan Chadkin).
0.16.1
- Allow to use Size Limit in CI with Node.js 4.
0.16
getSize()now returns{ gzip, parsed }(by Bogdan Chadkin).- Improve size calculation accuracy (by Bogdan Chadkin).
- Array support in the
path(by Bogdan Chadkin).
0.15.2
- Improve performance (by Bogdan Chadkin).
0.15.1
- Allow to use Size Limit in CI with Node.js 4.
0.15
- Remove Node.js 4 support.
- Use
webpack4.0 (by Jayden Seric). - Use
globby8.0.
0.14.1
- Use
cosmiconfig4.0. - Use
yargs11.0.
0.14
- Add
nameoption to config. - Add
gzipoption to config.
0.13.2
- Use
globby7.0.
0.13.1
- Allow to use Size Limit without
package.json.
0.13
- Add
.size-limitconfig support (by Vladimir Borovik).
0.12.1
- Fix dependency resolving with custom webpack config (by Sivan Mehta).
0.12
- Add custom webpack config support (by Sivan Mehta).
0.11.6
- Fix CLI messages (by @mute).
0.11.5
- Better error message on
--whywith"webpack": false.
0.11.4
- Update
yargs.
0.11.3
- Better error message on wrong config.
- Fix English in config error messages (by Tim Marinin).
0.11.2
- Show config example in config error messages.
- Better error message on wrong config.
0.11.1
- Better error message on missed file in legacy CLI.
0.11
- Ignore size of
peerDependencies.
0.10
- Add CSS files support (by Sebastian Werner).
- Add support for more static files types (by Sebastian Werner).
0.9
- Use UglifyJS 3 to support ES2016 out of box.
- Add argument and option to disable webpack.
- Deprecate argument and option for Babili.
- Deprecate limit in CLI arguments.
- Deprecate old
"sizeLimit"section name. - Better error messages style.
- Clean npm package from test files.
0.8.4
- Fix error messages text (by Alexandr Subbotin).
0.8.3
- Improve error messages style.
0.8.2
- Better output for projects with multiple limits.
- Fix multiple limits support in
--why.
0.8.1
- Improve CLI help (by Peter deHaan).
0.8
- Add
size-limitconfiguration section support.
0.7.1
- Fix multiline error messages in CLI.
- Do not load
node-zopflias loose dependency.
0.7
- Add glob pattern support to
sizeLimitsection.
0.6.2
- Better project name in Webpack Bundle Analyzer.
0.6.1
- Load images by
file-loader.
0.6
- Add
sizeLimitconfiguration section support.
0.5.1
- Use gzip sizes in Webpack Bundle Analyzer.
0.5
- Add Semaphore support.
0.4
- Add CircleCI support.
0.3.2
- Fix bundle name in
--whymode. - Move gzip calculation inside webpack.
0.3.1
- Use
read-pkg-upto findpackage.json. - Use
ci-job-numberto detect CI job number.
0.3
- Run only on first CI job to save CI resources.
0.2
- Add
--babiliargument. - Use Chalk 2.
0.1.3
- Fix CLI text (by Yaroslav Markin).
0.1.2
- Fix CLI text (by Marais Rossouw).
0.1.1
- Fix parsing
Bunit without kilo/mega prefix.
0.1
- Initial release.
README
Size Limit
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 GitHub Actions, Circle CI 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.
Additionally, you can customize time plugin via config
for every check with network speed, latency and so on. - Calculations include all dependencies and polyfills
used in your JS.
With GitHub action Size Limit will post bundle size changes as a comment
in pull request discussion.
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.
ย ย Size Limit is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups.
Who Uses Size Limit
- MobX
- Material-UI
- Ant Design
- 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
- 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 inpackage.jsonand loads the config. - If you use the
webpackplugin, 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. - The
webpackplugin creates an empty webpack project, adds your library
and looks for the bundle size difference. - The
timeplugin compares the current machine performance with that of
a low-priced Android devices to calculate the CPU throttling rate. - Then the
timeplugin 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
Install the preset:
shnpm install --save-dev size-limit @size-limit/fileAdd the
size-limitsection and thesizescript to yourpackage.json:diff+ "size-limit": [ + { + "path": "dist/app-*.js" + } + ], "scripts": { "build": "webpack ./webpack.config.js", + "size": "npm run build && size-limit", "test": "vitest && eslint ." }Hereโs how you can get the size for your current project:
sh$ npm run size Package size: 30.08 kB with all dependencies, minified and brotliedNow, letโs set the limit. Add 25% to the current total size and use that as
the limit in yourpackage.json:diff"size-limit": [ { + "limit": "35 kB", "path": "dist/app-*.js" } ],Add the
sizescript to your test suite:diff"scripts": { "build": "webpack ./webpack.config.js", "size": "npm run build && size-limit", - "test": "vitest && eslint ." + "test": "vitest && eslint . && npm run size" }If you donโt have a continuous integration service running, donโt forget
to add one โย start with GitHub Actions.
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
Install the preset:
shnpm install --save-dev size-limit @size-limit/preset-appAdd the
size-limitsection and thesizescript to yourpackage.json:diff+ "size-limit": [ + { + "path": "dist/app-*.js" + } + ], "scripts": { "build": "webpack ./webpack.config.js", + "size": "npm run build && size-limit", "test": "vitest && eslint ." }Hereโs how you can get the size for your current project:
sh$ npm run size Package size: 30.08 kB with all dependencies, minified and brotlied Loading time: 602 ms on slow 3G Running time: 214 ms on Snapdragon 410 Total time: 815 msNow, letโs set the limit. Add 25% to the current total time and use that as
the limit in yourpackage.json:diff"size-limit": [ { + "limit": "1 s", "path": "dist/app-*.js" } ],Add the
sizescript to your test suite:diff"scripts": { "build": "webpack ./webpack.config.js", "size": "npm run build && size-limit", - "test": "vitest && eslint ." + "test": "vitest && eslint . && npm run size" }If you donโt have a continuous integration service running, donโt forget
to add one โย start with GitHub Actions.
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
Install preset:
shnpm install --save-dev size-limit @size-limit/preset-big-libAdd the
size-limitsection and thesizescript to yourpackage.json:diff+ "size-limit": [ + { + "path": "dist/react.production-*.js" + } + ], "scripts": { "build": "webpack ./scripts/rollup/build.js", + "size": "npm run build && size-limit", "test": "vitest && eslint ." }If you use ES modules you can test the size after tree-shaking with
import
option:diff"size-limit": [ { "path": "dist/react.production-*.js", + "import": "{ createComponent }" } ],Hereโs how you can get the size for your current project:
sh$ npm run size Package size: 30.08 kB with all dependencies, minified and brotlied Loading time: 602 ms on slow 3G Running time: 214 ms on Snapdragon 410 Total time: 815 msNow, letโs set the limit. Add 25% to the current total time and use that
as the limit in yourpackage.json:diff"size-limit": [ { + "limit": "1 s", "path": "dist/react.production-*.js" } ],Add a
sizescript to your test suite:diff"scripts": { "build": "rollup ./scripts/rollup/build.js", "size": "npm run build && size-limit", - "test": "vitest && eslint ." + "test": "vitest && eslint . && npm run size" }If you donโt have a continuous integration service running, donโt forget
to add one โย start with GitHub Actions.Add the library size to docs, it will help users to choose your project:
diff# Project Name Short project description * **Fast.** 10% faster than competitor. + * **Small.** 15 kB (minified and brotlied). + [Size Limit](https://github.com/ai/size-limit) controls the size.
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
First, install
size-limit:shnpm install --save-dev size-limit @size-limit/preset-small-libAdd the
size-limitsection and thesizescript to yourpackage.json:diff+ "size-limit": [ + { + "path": "index.js" + } + ], "scripts": { + "size": "size-limit", "test": "vitest && eslint ." }Hereโs how you can get the size for your current project:
sh$ npm run size Package size: 177 B with all dependencies, minified and brotliedIf your project size starts to look bloated, run
--whyfor analysis:shnpm run size -- --whyWe use Statoscope as bundle analyzer.
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 yourpackage.json:diff"size-limit": [ { + "limit": "9 kB", "path": "index.js" } ],Add the
sizescript to your test suite:diff"scripts": { "size": "size-limit", - "test": "vitest && eslint ." + "test": "vitest && eslint . && npm run size" }If you donโt have a continuous integration service running, donโt forget
to add one โย start with GitHub Actions.Add the library size to docs, it will help users to choose your project:
diff# Project Name Short project description * **Fast.** 10% faster than competitor. + * **Small.** 500 bytes (minified and brotlied). Noย dependencies. + [Size Limit](https://github.com/ai/size-limit) controls the size.
Reports
Size Limit has a GitHub action that comments and rejects pull requests based
on Size Limit output.
- Install and configure Size Limit as shown above.
- Add the following action inside
.github/workflows/size-limit.yml
name: 'size'
on:
pull_request:
branches:
- master
jobs:
size:
runs-on: ubuntu-latest
env:
CI_JOB_NUMBER: 1
steps:
- uses: actions/checkout@v1
- uses: andresz1/size-limit-action@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}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 usenpm install --save-dev @size-limit/webpack, or you can use our preset@size-limit/preset-big-lib.
Plugins:
@size-limit/filechecks the size of files with Brotli (default), Gzip
or without compression.@size-limit/webpackadds your library to empty webpack project
and prepares bundle file forfileplugin.@size-limit/webpack-whyadds reports forwebpackplugin
about your library is of this size to show the cost of all your
dependencies.@size-limit/webpack-cssadds css support forwebpackplugin.@size-limit/esbuildis likewebpackplugin, but usesesbuild
to be faster and use less space innode_modules.@size-limit/esbuild-whyadd reports foresbuildplugin
about your library is of this size to show the cost of all your
dependencies.@size-limit/timeuses headless Chrome to track time to execute JS.
Plugin presets:
@size-limit/preset-appcontainsfileandtimeplugins.@size-limit/preset-big-libcontainswebpack,file, andtimeplugins.@size-limit/preset-small-libcontainsesbuildandfileplugins.
Third-Party Plugins
Third-party plugins and presets named starting with size-limit- are also supported.
For example:
size-limit-node-esbuild
is like@size-limit/esbuildbut for Node libraries.size-limit-preset-node-lib
is like@size-limit/preset-small-libbut for Node libraries which contains
abovenode-esbuildand corefileplugins.nx-size-limit
is an NX build system community plugin.
Limits Config
Size Limits supports three ways to define limits config.
size-limitsection inpackage.json:json"size-limit": [ { "path": "index.js", "import": "{ createStore }", "limit": "500 ms" } ]or a separate
.size-limit.jsonconfig file:js;[ { path: 'index.js', import: '{ createStore }', limit: '500 ms' } ]or a more flexible
.size-limit.jsor.size-limit.cjsconfig file:jsmodule.exports = [ { path: 'index.js', import: '{ createStore }', limit: '500 ms' } ]or types
.size-limit.ts:tsimport type { SizeLimitConfig } from '../../packages/size-limit' module.exports = [ { path: 'index.js', import: '{ createStore }', limit: '500 ms' } ] satisfies SizeLimitConfig
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 testimport { 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
pathoption. 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. - message: an optional custom message to display additional information,
such as guidance for resolving errors, relevant links, or instructions
for next steps when a limit is exceeded. - 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
falseit will disable webpack. - running: with
falseit will disable calculating running time. - gzip: with
trueit will use Gzip compression and disable
Brotli compression. - brotli: with
falseit will disable any compression. - config: a path to a custom webpack or esbuild 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. - modifyEsbuildConfig: (.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.jsonfrom another build to compare
(when--whyis using). - uiReports: custom UI reports list (see Statoscope docs).
- disablePlugins: npm package names of plugins to skip
for this check. For example:"@size-limit/webpack","@size-limit/esbuild",
or"@size-limit/time".
If you use Size Limit to track the size of CSS files, make sure to setwebpack: false. Otherwise, you will get wrong numbers, because webpack
inserts style-loader runtime (โ2 kB) into the bundle.
Also, you avoid having a config and pass the limit to CLI:
npm install --save-dev @size-limit/file
npx size-limit --limit "10 kB" dist/bundle.jsAdditionally, you can specify a custom path to your configuration file when running the CLI:
npx size-limit --config configs/size-limit.jsonAnalyze with `--why`
You can run size-limit --why to analyze the bundle.
You will need to install @size-limit/esbuild-why or @size-limit/webpack-why
depends on which bundler you are using (default is esbuild).
For @size-limit/esbuild-why,
it will generate a esbuild-why.html at the current directory & open it in the browser.
If you also specify --save-bundle <DIR>,
the report will be generated inside <DIR>.
If you have multiple sections in your config,
the files will be named esbuild-why-{n}.html,
or you can give it a custom name:
[
{
"name": "cjs"
/* snap */
},
{
"name": "esm"
/* snap */
}
]This will produce esbuild-why-cjs.html and esbuild-why-esm.html respectively.
For @size-limit/webpack-why,
it will generate the report and open it in the browser automatically.
JS API
const sizeLimit = require('size-limit')
const filePlugin = require('@size-limit/file')
const webpackPlugin = require('@size-limit/webpack')
sizeLimit([filePlugin, webpackPlugin], [filePath]).then(result => {
result //=> { size: 12480 }
})