React Build Optimisation
5 min read
Optimise production React: analyse bundles, use React.lazy for code splitting, serve WebP images, enable Brotli compression on the server, and use a CDN for static assets. Measure Core Web Vitals with Lighthouse.
Build Optimisation Checklist
- Analyse bundle:
npx vite-bundle-visualizer - Lazy-load heavy libraries (charts, editors)
- Use
React.memo on expensive list items - Enable gzip/brotli on your server
- Serve images in WebP/AVIF format
- Set proper cache headers
- Use a CDN for static assets
- Preload critical fonts