Code Splitting & Lazy Loading

import React, { Suspense } from 'react';

// 1. Standard Import (Bundled immediately)
import Header from './Header'; 

// 2. Dynamic Import / Lazy Load (Split into a separate bundle)
// This component and all of its heavy dependencies won't be downloaded
// until the 'Show Heavy Dashboard' button is clicked and it actually renders.
const HeavyDashboard = React.lazy(() => import('./HeavyDashboard'));

export default function App() {
  const [showDashboard, setShowDashboard] = React.useState(false);

  return (
    <div>
      {/* Loads immediately because it was statically imported */}
      <Header />
      
      <button onClick={() => setShowDashboard(true)}>
        Show Heavy Dashboard
      </button>

      {showDashboard && (
        // 3. We MUST wrap lazy components in Suspense
        <Suspense fallback={<h2>Downloading dashboard code... please wait.</h2>}>
          <HeavyDashboard />
        </Suspense>
      )}
    </div>
  );
}