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