React Code Splitting Strategies

Split code into smaller chunks for better performance.

Route-Based Splitting

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const Contact = lazy(() => import('./routes/Contact'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

Component-Based Splitting

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Suspense fallback={<p>Loading chart...</p>}>
        <HeavyChart />
      </Suspense>
    </div>
  );
}

Named Exports

const { Chart } = lazy(() =>
  import('./charts').then(module => ({ default: module.Chart }))
);

Preloading

const HeavyComponent = lazy(() => import('./Heavy'));

// Preload on hover
<button onMouseEnter={() => import('./Heavy')}>
  Load Heavy
</button>

Remember

• Split by route first
• Split heavy components
• Use Suspense for loading
• Preload on interaction

Next: Learn environment variables!