React.lazy() Route Code Splitting Explained

Short summary

React.lazy() converts static imports to dynamic imports, allowing bundlers to create separate chunks for route components that are downloaded on-demand rather than on initial load. This dramatically reduces initial bundle size—a 5MB app might only need 80KB for the first route. Pair lazy() with Suspense to show fallback UI during chunk loading, verify splits actually occurred via build output inspection or bundle visualizer tools, and be aware that static imports elsewhere in the codebase can shadow lazy() calls and prevent the split from happening.

• •React.lazy() + dynamic imports create separate chunks for route components loaded on-demand
• •Suspense catches loading states and renders fallback UI while chunks download
• •Verify splits via build artifacts, bundle visualizer plugins, or Network tab; watch for static imports that prevent splitting

Generated with AI, which can make mistakes.