React Code Splitting Strategies

Split code into smaller chunks for better performance.

Route-Based Splitting

```javascript 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

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

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

Named Exports

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

Preloading

```javascript 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!