When CRA Isn’t Enough
summary
Yandex's SERP outgrew Create React App defaults: a single JS bundle ballooned to ~30MB and hurt first render/TTI. The team uses TypeScript tsc with a forked ts-loader (emit without type-checking, run types separately), ts-node for development, rewrites webpack splitChunks to produce a runtime plus a popular-components chunk, and built a custom plugin to emit per-language bundles (replacing a 1.5h multi-compile). These changes cut build time to ~3–5 minutes and produced measurable TTI/load improvements compared with a single-bundle approach.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 2:06Standard CRA problems
- 4:15Project description and goals
- 8:30Server-side build and TypeScript
- 10:18Development build
- 11:43Client build and optimizations
- 13:53Bundle and chunk splitting
- 18:32Plugin for popular components
- 21:47Translation handling
- 24:59Loading and initialization
- 26:04Metrics and results
- 29:39Conclusion and recommendations
- 31:07References and materials
- 32:14Q&A
related talks
30mTowards a simpler JavaScript ecosystem
32mHow React Compiler Performs on Real Code
24mOptimising React’s TTI
31m10KB or Bust" The Delicate Power of Webpack and Babel"
26mHow React Compiler Performs on Real Code
36mYou build React apps: do you even know how?
26mA tale of two front-end development environments: or how bend npm3 to your will
31mSpeeding up Startup for Large React Apps