How do build tools split a React app into smaller chunks for faster page loads?

A build tool can split code so that a page only downloads the JavaScript it actually needs right away, instead of one giant file containing the entire app. Extra pieces of the app are downloaded later, only when the user actually navigates to that part of the site, using dynamic import statements.

// This creates a separate chunk that only loads when needed
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <Dashboard />
    </Suspense>
  );
}