Code splitting with lazy and Suspense

Model answer. By default a bundler can put the whole app into one large JavaScript file, so users download code for pages they may never visit. Code splitting breaks the bundle into chunks loaded on demand, which speeds up the first load.

React.lazy takes a function that calls dynamic import(), which tells the bundler to create a separate chunk. <Suspense> shows a fallback while that chunk is loading.

import { lazy, Suspense } from 'react';
const AdminDashboard = lazy(() => import('./AdminDashboard'));   // separate chunk

function App() {
  return (
    <Suspense fallback={<div className="skeleton" aria-busy="true">Loading dashboard…</div>}>
      <AdminDashboard />
    </Suspense>
  );
}

Good candidates: routes, admin areas, heavy widgets (charts, editors, maps), modals that open rarely.

Fallback guidance: match the final layout's size (a skeleton), so the page does not jump; keep it accessible (aria-busy, readable text); and place Suspense boundaries so one slow widget does not blank the whole page.

Also: the lazily imported module needs a default export (or a wrapper); wrap lazy parts in an error boundary in case the chunk fails to download (for example after a new deploy); and preload likely next chunks on hover to hide the delay.