10KB or Bust: The Delicate Power of Webpack and Babel

on YouTube ↗58m

" summary

Shows concrete Webpack and Babel tweaks that cut real payloads: use type="module" with a legacy fallback to send modern browsers a much smaller bundle, enable tree shaking (lodash drops from ~73 KB to ~11 KB in the demo), prefer useBuiltIns so Babel only polyfills what target browsers need, set NODE_ENV=production, enable module concatenation/scope hoisting, split code with dynamic import for under-10 KB initial payloads, deliver image skeletons (tiny LQIP JPEG/SVG) and Brotli compression, add Server-Timing headers and prepack serverless functions to reduce cold starts.

AI-written summary · about

" chapters (17)

1. 0:00Introduction and background
2. 1:51The state of web performance
3. 4:48The impact of 2G networks
4. 7:41Performance case studies
5. 10:53Choosing frameworks
6. 13:57Modern build optimizations
7. 17:41Tree shaking and dead code
8. 23:12Babel and code configuration
9. 26:58Production environment flags
10. 28:36Code splitting strategies
11. 31:42Handling source maps
12. 33:12Module concatenation
13. 36:53Initial skeleton loading
14. 44:25Server-side optimizations
15. 47:43Brotli compression
16. 49:22Serverless considerations
17. 51:04Future web technologies

" related talks

• 52m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · jsDay 2018
• 31m10KB or Bust" The Delicate Power of Webpack and Babel"Brian Holt · JSConfCO 2018
• 30m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · ReactiveConf 2018
• 41m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Codemotion Amsterdam 2018
• 06mLightning talk from Andrey SitnikAndrey Sitnik · ReactiveConf 2017
• 45mDark Art of Webpack Bundle TuningVijay Dharap · JSFoo 2017
• 34mBuild-time Optimizations in JavaScript ApplicationsEvan You · ReactiveConf 2017
• 30mWebpack – The React PartsJuho Vepsäläinen · ReactNext 2017