Tutorials › React Modern Development › Code Splitting

Code Splitting

5 min read

React.lazy() with Suspense splits the bundle so component code loads only when needed. Use at the route level for the biggest impact. Analyse bundle size with rollup-plugin-visualizer to find large modules.

Code Splitting

import { lazy, Suspense } from "react";

const HeavyChart = lazy(() => import("./HeavyChart"));
const AdminPanel = lazy(() => import("./AdminPanel"));

function App({ isAdmin }) {
  return (
    }>
      
      {isAdmin && }
    
  );
}
// AdminPanel.js is only loaded if isAdmin is true

← React 19 Features Next: Environment Variables →

Quick Access

Code Splitting

Code Splitting