Performance

Bundle Optimization

• Code split by route (React.lazy, dynamic import())
• Tree shake unused code — use ES modules, check sideEffects in package.json
• Analyze bundle with webpack-bundle-analyzer or source-map-explorer
• Externalize large dependencies or load from CDN
• Compress with gzip/brotli

Runtime Performance

• Virtualize long lists (render only visible items)
• Memoize expensive computations
• Use Web Workers for heavy processing
• Profile with Chrome DevTools Performance panel
• Avoid layout thrashing (batch DOM reads, then writes)
• Use will-change and contain CSS properties strategically

Network Performance

• Use HTTP/2 or HTTP/3
• Implement proper caching headers (Cache-Control, ETag)
• Prefetch likely next pages (<link rel="prefetch">)
• Use stale-while-revalidate caching strategy
• Minimize API waterfall — batch or parallelize requests

When Optimizing

• Measure first — profile before optimizing
• Focus on the bottleneck, not micro-optimizations
• Set performance budgets and monitor them
• Test on real devices and slow networks (3G throttling)
• Use Lighthouse CI in your pipeline