Overview: Large JavaScript bundles can slow initial load and interactivity in React apps, and code splitting with React.lazy and Suspense enables loading code on demand.

Best practices: Prefetch routes where navigation is predictable, add error boundaries for failed imports, and compare production bundle sizes before and after splitting.

Route-level code splitting: Lazy load per route to ensure page components load only when users navigate, keeping the main layout lightweight.

Implementation strategy: Identify large non-critical components such as charts, editors, and admin tools, wrap them in dynamic imports, and verify chunk separation in production builds.

Code splitting basics: Bundlers like Vite or webpack create separate chunks at dynamic import() points, enabling on-demand download of features such as charts, reports, and settings.

Conclusion: The biggest gains come from splitting large routes and expensive features rather than lazy loading everything; measure impact with bundle analysis and real-user monitoring.

Practical example: Demonstrates a lazy-loaded Reports component with a Suspense boundary and a simple loading fallback.

Practical example code: Shows a React app skeleton with lazy-loaded Dashboard, Reports, and Settings pages, a navigation component, and a Suspense boundary for loading states.

Guidelines for effective splitting: Avoid excessive fragmentation, choose meaningful boundaries, provide accessible loading fallbacks, and measure impact on initial bundle size and navigation performance.

How React.lazy() and Suspense work: React.lazy() loads a component dynamically, while Suspense provides a fallback UI during loading (e.g., a loading message or skeleton).