Code splitting strategies

Summary

Split by route, feature, or component — trade initial bundle size vs waterfall of chunk requests. Route-level splits align with navigation; component-level splits need Suspense/fallback UX. Preload critical route chunks on intent (hover/focus). Avoid splitting so aggressively that HTTP overhead dominates.

Code example

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

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

Key points

• Split by route, feature, or component — trade initial bundle size vs waterfall of chunk requests.
• Route-level splits align with navigation; component-level splits need Suspense/fallback UX.
• Preload critical route chunks on intent (hover/focus).
• Avoid splitting so aggressively that HTTP overhead dominates.

Further reading

• Code splitting
• React lazy

Related concepts

• Critical rendering path
• Dynamic import chunking