implementing-code-splitting

djankies's avatarfrom djankies

Teaches code splitting with lazy() and Suspense in React 19 for reducing initial bundle size. Use when implementing lazy loading, route-based splitting, or optimizing performance.

⭐0stars🔀0forks📁View on GitHub🕐Updated Nov 25, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides comprehensive guidance and production-ready code patterns for implementing efficient code splitting in React 19 using lazy() and Suspense. It empowers developers to significantly reduce initial bundle sizes and improve Core Web Vitals by mastering modern performance optimization techniques, including route-based and component-level lazy loading.

Use Cases

  • Route-based splitting: Implement dynamic imports for different application pages to ensure users only download the code necessary for the current route, drastically reducing initial load time.
  • Heavy component optimization: Defer the loading of resource-intensive UI elements, such as data visualization charts or complex editors, until they are actually required by the user.
  • Conditional UI loading: Optimize performance by lazy loading components that are hidden behind user interactions, such as modals, tabs, or 'load more' sections.
  • Advanced module patterns: Handle complex import scenarios, including named exports, to maintain clean architecture while benefiting from React's lazy loading capabilities.
nameimplementing-code-splitting
descriptionTeaches code splitting with lazy() and Suspense in React 19 for reducing initial bundle size. Use when implementing lazy loading, route-based splitting, or optimizing performance.
allowed-toolsRead, Write, Edit
version1.0.0

Code Splitting with lazy() and Suspense

Basic Pattern

import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

Route-Based Splitting

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

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Component-Based Splitting

import { lazy, Suspense, useState } from 'react';

const Chart = lazy(() => import('./Chart'));
const Table = lazy(() => import('./Table'));

function DataView() {
  const [view, setView] = useState('chart');

  return (
    <>
      <button onClick={() => setView('chart')}>Chart</button>
      <button onClick={() => setView('table')}>Table</button>

      <Suspense fallback={<Spinner />}>
        {view === 'chart' ? <Chart /> : <Table />}
      </Suspense>
    </>
  );
}

Named Exports

const { BarChart } = await import('./Charts');

export const BarChart = lazy(() =>
  import('./Charts').then(module => ({ default: module.BarChart }))
);

For comprehensive code splitting patterns, see: research/react-19-comprehensive.md lines 1224-1238.