Make the Web lighter
Andrey Sitnik, Evil Martians
Size Limit
Websites are becoming heavier and heavier
Assets size by type from Amplifr
node_modules
my JS
CSS
SVG
245 KB
135 KB
83 KB
9 KB
We must optimize open source JS libraries size
The rule of optimization
1. Benchmark
2. Optimize
Bundle size?
webpack ./src/index.js
gzip-size ./dist/bundle.js | pretty-bytesSmall example
if (process.browser) {
return global.crypto.getRandomValues(new Uint8Array(1))
} else {
return require('crypto').randomBytes(1)
}Bundle size: 0.1 KB
Bundle size vs. the real cost
if (process.browser) {
return global.crypto.getRandomValues(new Uint8Array(1))
} else {
return require('crypto').randomBytes(1)
}Bundle size: 0.1 KB
The real cost: 95 KB
Why the real cost is different
if (process.browser) {
return global.crypto.getRandomValues(new Uint8Array(1))
} else {
return require('crypto').randomBytes(1)
}Polyfills by webpack
Main reason of heavy bundle
- Polyfills
- Dependencies
The real cost
- Create empty webpack project
- Add library as a project dependency
- Check how much project size has increased
Size Limit calculates library size
$ npx size-limit index.js
Package size: 8.46 KB
With all dependencies, minified and gzippedSize Limit analyzes library dependencies
$ npx size-limit index.js --whySize Limit prevents regressions
"size-limit": [
{
"limit": "9 KB",
"path": "index.js"
}
],
"scripts": {
"test": "size-limit"
}
Size Limit works on Travis CI
Size Limit reduced…
PostCSS size by −25%
Browserslist size by −25%
EmojiMart size by −20%
nanoid size by −33%
Logux size by −90%
Link
github.com / ai / size-limit
Size Limit: Make the Web lighter
By Andrey Sitnik
Size Limit: Make the Web lighter
Size Limit is a tool to prevent JavaScript libraries bloat. With it, you know exactly for how many kilobytes your JS library increases the user bundle. You can add Size Limit to your continuous integration service (such as Travis CI) and set the limit. If you accidentally add a massive dependency, Size Limit will throw an error.
