code-splitting

Reduce bundle size by implementing code splitting with React.lazy() and Suspense, loading components only when needed. This approach delays loading of non-critical code until the user navigates to or interacts with specific routes or components, improving initial page load performance.

Use React.lazy() with dynamic import() to wrap route components, then wrap your route tree in Suspense with a fallback UI. This ensures each route's code loads only when the user navigates to it, significantly reducing the initial bundle sent to the browser.

You can lazy load both routes and individual components. Use React.lazy() and Suspense for specific components like charts or tables that aren't immediately visible, allowing fine-grained control over what loads and when, beyond route-level splitting.

Yes, code splitting integrates seamlessly with react-router-dom. Wrap lazily-imported route components in Suspense at your route configuration level, and React Router will automatically load the code chunk only when users navigate to that route.

Suspense adds minimal overhead—it manages the loading state and displays a fallback UI while the code chunk downloads. The performance gain from deferring code download far outweighs this cost, especially for large components or routes users may never visit.

Use component-level splitting for heavy, non-critical UI elements visible conditionally or below the fold—such as admin panels, modals, or data visualization components. Route-based splitting is best for separating entire pages; combine both strategies for optimal performance across your application.