Maximising performance with React code-splitting techniques
summary
Concrete claims and tools: measurable bundle bloat, using webpack bundle analyzer plus Lighthouse and Sentry to find hot spots, splitting by route and by large components with React.lazy with Suspense or loadable-components, preloading heavy assets (example: Airbnb lazy loads a ~200KB WebGL map), inlining critical CSS for faster FCP, and adopting Next.js server components so code splitting happens automatically with use client for interactive parts. Expect pragmatic patterns, implementation steps, and trade offs rather than high level theory.
AI-written summary · about
chapters (12)
- 0:00Start
- 0:58Common reasons for performance issues
- 1:35Common ways to monitor the performance
- 5:23Importance of JavaScript bundle size
- 7:20Loadable Components
- 7:46Advanced techniques
- 8:47Route-based code splitting
- 9:34Preloading
- 10:21Inlining critical CSS
- 13:04Dynamic chunks
- 16:26React Server Components (RSC)
- 22:11When to use Server and Client Components
related talks
24mA Beginner's Guide to Code Splitting Your React App
24mOptimising React’s TTI
39mMaking Your React Apps Perform At Scale
25mDesigning High Performance React Applications
26mLightning Fast React Apps
15mOptimising React TTI
34mOptimizing Performance in Large-Scale React & Node.js Applications
32mPractical Performance Tips Building Progressive Web Apps