10KB or Bust: The Delicate Power of Webpack and Babel
summary
Concrete knobs and their payoffs: swap to Babel preset-env, set modules false and let Webpack tree-shake lodash to cut 73.3KB → 11.1KB, enable scope-hoisting/module-concatenation to roughly halve bundles, and use Brotli plus gzip for API responses. Aim to land the critical shell initial page under 10KB with code-splitting and service-worker prefetching. Measured examples: a LinkedIn desktop load hits 1.3 minutes on 2G vs Treebo ~12s, Preact ≈0.1s, Vue ≈0.7s, Ember ≈5s. Use image skeletons and disable prod source maps.
AI-written summary · about
chapters (26)
- 0:00Introduction
- 3:18We are all trying our best
- 3:53We are all just trying to survive
- 4:11Know your audience
- 5:34Lowpower phones
- 8:31The bloated internet
- 12:35Bangalore vs Silicon Valley
- 13:02Feeling bad about yourself
- 13:38Choosing a framework
- 16:38Babel Presets
- 19:14Type equals module
- 20:40Tree shaking
- 23:39Tree shaking is a silver bullet
- 28:06Node MV vs Production
- 28:51Code Splitting
- 31:19Source Maps
- 32:44Scope Poisoning
- 34:44Image skeletons
- 39:32Summary
- 42:25Functions
- 43:10Server timings API
- 44:09Resizing API responses
- 44:57broadly
- 46:16cold start
- 47:22future computers
- 48:04prepack
related talks
31m10KB 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
45mDark Art of Webpack Bundle Tuning
32mLet's Tree-shake it...
28mA Case Study
28mDecoding JavaScript: Loading Performance —