Build-time Optimizations in JavaScript Applications
summary
Concrete results: webpack and Rollup use module scope hoisting to enable tree‑shaking that noticeably shrinks bundles; Babel plugins hoist static virtual‑DOM subtrees to avoid repeated diffing; template compilation converts many fragments to string concatenation for faster server rendering and produces pre-rendered critical CSS inlined per route; prepack‑style partial evaluation and custom compiler modules turn runtime i18n and libs into static code, cutting client CPU and payload.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 0:58What is a compiler
- 2:50Minifiers
- 4:19Treeshaking
- 6:24Template Compilation
- 11:00Alt vs JIT
- 12:19Scoped CSS
- 19:06Really Modern
- 20:02Prepack
- 21:38Proof Concept
- 22:47Static Trees
- 23:52Skipping children array normalization
- 26:16ServiceI rendering
- 29:37Inline critical CSS
- 30:33Custom compiler modules
- 32:12Conclusion
related talks
52m10KB or Bust: The Delicate Power of Webpack and Babel
58m10KB or Bust: The Delicate Power of Webpack and Babel
27mCompile Like It's 2017
40mBuilding a Platform: Webpack and the Future
35mAshley Williams - SeattleJS Conference 2017
21mTree Shaking — Deploy Even Less Code to Production
22mOwning your Build-step – Owning your Code
45mBundler Bonanza