# Implementing Code Splitting

> 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.

- Skill: `majiayu000/implementing-code-splitting` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/implementing-code-splitting`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/implementing-code-splitting/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/implementing-code-splitting

---


# Code Splitting with lazy() and Suspense

## Basic Pattern

```javascript
import { lazy, Suspense } from 'react';

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

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

## Route-Based Splitting

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

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

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