What is code splitting and how does dynamic import() enable it?

Code splitting divides the JavaScript bundle into smaller chunks that are loaded on demand rather than upfront, reducing initial load time.

How dynamic import() works:

// Without code splitting — everything in one bundle
import HeavyChart from './HeavyChart';

// With code splitting — HeavyChart loaded only when needed
const HeavyChart = React.lazy(() => import('./HeavyChart'));

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart />
    </Suspense>
  );
}

Bundler behaviour: when the bundler (Webpack/Vite/Rollup) sees a dynamic import(), it emits a separate chunk file. That chunk is only downloaded when the import() call executes at runtime.

Common split points:

• Route-level — each page/route is a separate chunk (most impactful).
• Heavy library — import('chart.js') only when a chart is rendered.
• Feature flag — only load premium features for Pro users.