Part 40: Code Splitting with React.lazy & Suspense

In large Single Page Applications, bundling all JavaScript into a single large file increases initial load time. Code splitting breaks your bundle into smaller chunks downloaded only when needed.

1. Dynamic Imports & React.lazy

React.lazy lets you render a dynamic import as a regular component:

import { lazy, Suspense } from 'react';

// Instead of: import AdminDashboard from './AdminDashboard';
const AdminDashboard = lazy(() => import('./AdminDashboard'));

export default function App() {
  return (
    <div>
      <header>My Website</header>

      {/* Suspense provides a fallback spinner while the chunk downloads */}
      <Suspense fallback={<div className="loading-spinner">Loading Admin Panel...</div>}>
        <AdminDashboard />
      </Suspense>
    </div>
  );
}

2. Route-Based Code Splitting

The most impactful place to apply code splitting is at the route level:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Settings = lazy(() => import('./pages/Settings'));

export default function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div className="full-page-loader">Loading view...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/analytics" element={<Analytics />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Key Takeaways

• Use React.lazy and dynamic import() to load components on-demand.
• Always wrap lazy-loaded components with <Suspense fallback={...}>.
• Route-based code splitting dramatically reduces initial bundle sizes and accelerates First Contentful Paint (FCP).

In Part 41, we will master Error Boundaries to catch JavaScript errors gracefully!