10KB or Bust" The Delicate Power of Webpack and Babel"
summary
Claim: aim for an initial payload under 10 kilobytes by changing build configs not rewriting app code. Tools: Webpack, Babel (preset-env, useBuiltIns, modules false), Preact for examples, service workers for background fetching. Concrete wins: tree-shaking lodash cuts a sample bundle from 73.3 KB → 11.1 KB, LinkedIn desktop experience can take ~90s on 2g 14 kbps while a tuned site hits first meaningful paint in ~0.25s. Also use code-splitting, production React build, Brotli/gzip, no prod source maps, and image skeletons.
AI-written summary · about
chapters (29)
- 0:00Intro
- 1:35Pitch
- 2:44Whos ready
- 3:53Introduction
- 5:22I hate it
- 5:59We are trying our best
- 6:39Know your audience
- 8:36Browsing on 2G
- 9:25LinkedIn on 2G
- 12:36Bangalore vs San Francisco
- 13:30Question Your Framework
- 14:22Babel Preset ES2015
- 15:27ESM Modules
- 16:18Treeshaking
- 19:49Treeshaking is no silver bullet
- 20:34Use Builtins
- 21:31Loose Mode
- 22:16No Time
- 22:46Code Splitting
- 24:58Image skeletons
- 26:16Social networks
- 26:36Image size
- 27:10TLDR
- 27:52Pro tips
- 28:06Headers
- 28:32API Responses
- 29:00Brightly Compression
- 29:28Node Resolution
- 30:03Helicopters
related talks
52m10KB or Bust: The Delicate Power of Webpack and Babel
58m10KB or Bust: The Delicate Power of Webpack and Babel
41m10KB or Bust: The Delicate Power of Webpack and Babel
30m10KB or Bust: The Delicate Power of Webpack and Babel
58mResponsible JavaScript
41mHow we make Web Apps lightning fast at Microsoft!
28mA Case Study
26mWeb Performance in modern JavaScript world