Make the Web lighter

Andrey Sitnik, Evil Martians

Size Limit

Websites are becoming heavier and heavier

Source: www.keycdn.com/support/the-growth-of-web-page-size

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-bytes

Small 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

  1. Polyfills
  2. Dependencies

The real cost

  1. Create empty webpack project
  2. Add library as a project dependency
  3. 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 gzipped

Size Limit analyzes library dependencies

$ npx size-limit index.js --why

Size 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.

  • 4,968

More from Andrey Sitnik