Let's Tree-shake it...
summary
A tiny 3.7 KB source app using rxjs and webpack ends up shipping 220 kilobytes of JS; switching to modular rxjs imports shaves 71 kilobytes, switching to ESM and enabling module concatenation drops the bundle to about 29 KB, and lazy-loading the data chunk plus HTTP/2 push reduces time-to-interactive from ~3.8s to 2.2 seconds (data at 2.6s). Using pure annotations and avoiding CommonJS further trims bytes; measure bundle contents and network timing continuously to catch regressions.
AI-written summary · about
chapters (8)
- 0:00Start
- 6:47Creating a bundle...
- 9:25A Dead code elimination (in Uglify)
- 12:28A Proper fix using the pipe operator
- 16:24A Recommendation #2
- 17:15A Module optimizations: Concatenation
- 20:12Module optimizations: Code Splitting
- 30:11Summary of Recommendations
related talks
52m10KB or Bust: The Delicate Power of Webpack and Babel
21mTree Shaking — Deploy Even Less Code to Production
58m10KB or Bust: The Delicate Power of Webpack and Babel
16mThe Art of Tree-Shaking
31m10KB or Bust" The Delicate Power of Webpack and Babel"
45mDark Art of Webpack Bundle Tuning
28mDecoding JavaScript: Loading Performance —
22mUnderstanding Dependencies in JavaScript to Create More Performant App