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

on YouTube ↗41m

" summary

LinkedIn’s desktop page takes about 1.3 minutes to load on 2G while a similar site on Preact completes in ~12 seconds, so swapping frameworks matters: Preact is ~3.5 KB vs React ~32 KB and Ember ~144 KB. Practical tactics include compile twice with Babel (module type="module" for modern browsers), tree-shake lodash by importing specific functions (saves ~60 KB), and use module concatenation in Webpack (examples drop bundles from ~70 KB to ~37 KB).

AI-written summary · about

" chapters (10)

1. 0:00Start
2. 14:01QUESTION YOUR FRAMEWORK
3. 20:24COMPILE YOUR CODE TWICE WITH BABEL
4. 32:41SCOPE HOISTING
5. 37:37SERVER TIMINGS API
6. 38:01COMPRESS YOUR RESPONSES
7. 38:33LINKEDIN'S PERFORMANCE INCREASE WITH BROTLI
8. 38:54COLD START
9. 40:35BINARY BYTE CODE
10. 40:50HACKER NEWS CLONE

" 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
• 58m10KB or Bust: The Delicate Power of Webpack and BabelBrian Holt · Voxxed Days Bucharest 2018
• 36mPerformance for the long haulBen Schwarz · NG-DE Conference 2019
• 51mWhen JavaScript BytesTim Kadlec · performance.now() 2019
• 22mPerformance EmpathyHoussein Djirdeh · JSConf EU 2019
• 30mWebpack – The React PartsJuho Vepsäläinen · ReactNext 2017