What is code splitting and lazy loading in React?

import { lazy, Suspense } from 'react';

// ❌ Eager import — bundled in the main chunk even if rarely used
import HeavyChart from './HeavyChart';

// ✅ Lazy — loaded only when rendered for the first time
const HeavyChart = lazy(() => import('./HeavyChart'));
const AdminPanel = lazy(() => import('./AdminPanel'));

// Suspense shows fallback while the chunk loads
function Dashboard() {
  return (
    }>
      
    
  );
}

// Route-based code splitting — most impactful
const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

function App() {
  return (
    }>
      
        } />
        } />
        } />
      
    
  );
}