Code splitting and lazy loading with React.lazy and Suspense

Scenario

Context A single-page application bundles all routes into one large JavaScript file, resulting in a 3MB initial load. The Problem Users wait several seconds before the application becomes interactive because every page's code is downloaded upfront. Constraints Use React.lazy() to dynamically import route components. Wrap lazy components with Suspense and provide a loading fallback. Apply the pattern to at least three routes. Expected Deliverable A React Router setup using React.lazy and Suspense for route-level code splitting, reducing the initial bundle size with a visible loading fallback.

Targeted skills