Code splitting = ship the JS your app needs now, defer the rest until it's actually used. dynamic import() is the language primitive; React.lazy and Next's dynamic() wrap it for React component loading.

Why

Without code splitting, every line of every feature lands in one bundle. The user pays for the chart library on the dashboard, the CSV exporter, and the admin settings panel before even seeing the login page. First-load metrics (TTI, LCP) suffer.

Tools

1. Dynamic import (vanilla JS)

button.onclick = async () => {
  const { default: heavy } = await import('./heavy-tool.js');
  heavy.run();
};

Bundlers (webpack, esbuild, vite, rollup) split heavy-tool.js into its own chunk that loads on demand.

2. React.lazy + Suspense

const Chart = React.lazy(() => import('./Chart'));

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

3. Next.js dynamic()

import dynamic from 'next/dynamic';
const Map = dynamic(() => import('./Map'), {
  ssr: false,        // skip SSR for browser-only deps (window, leaflet, etc.)
  loading: () => <Spinner />,
});

Where to split (highest ROI first)

1. Per-route — every page is its own chunk. Frameworks (Next, Remix, React Router lazy routes) do this by default.
2. Modal / drawer / dialog content — rarely opened, often heavy (rich text editor, chart, video player).
3. Heavy libraries used in one spot — Chart.js, Monaco, Mapbox, PDF renderer.
4. Per-locale data — load French translations only for French users.
5. Admin / feature-flagged code — don't ship to users who can't see it.

Where NOT to split

• Anything needed for first paint (header, layout, primary CTA).
• Tiny components (split adds a request; payload smaller than HTTP overhead).
• Code on the critical user path (the loading spinner is visible latency).

Preloading: best of both

If you know the user is about to need a chunk (hover over a nav link, idle CPU), prefetch it:

<link rel="prefetch" href="/_next/static/chunks/admin.js">

Or programmatically:

// On hover
link.onmouseenter = () => import('./admin/page');

Next's <Link prefetch> does this automatically on viewport entry.

Measuring impact

• Bundle analyzer (next-bundle-analyzer, webpack-bundle-analyzer, vite-bundle-visualizer): see the chunk graph.
• Lighthouse: "Reduce unused JavaScript" flags split candidates.
• Coverage tab in Chrome DevTools: shows which JS was actually executed on a page.
• Real metrics: track LCP, TTI, FCP before/after — split that doesn't move the metric isn't worth the complexity.

Common pitfalls

• Waterfalls: route chunk → fetches another chunk → fetches data. Prefetch or co-load to flatten.
• Layout shift on load: reserve space for the lazy-loaded component (skeleton sized to match).
• SSR mismatch: components that depend on window need { ssr: false } in Next, or 'use client' + conditional render.
• Over-splitting: 50+ tiny chunks make HTTP/2 push less effective than one medium chunk. Aim for 30–200KB per chunk.
• Vendor mega-chunk: putting all node_modules into one big vendor chunk defeats the purpose. Split by usage.