Code Splitting und Lazy Loading mit Claude Code optimieren

Die Notwendigkeit von Code Splitting

Wenn die Bundle-Größe einer SPA wächst, wird das initiale Laden langsamer. Durch die richtige Implementierung von Code Splitting und Lazy Loading wird nur der benötigte Code zum benötigten Zeitpunkt geladen. Mit Claude Code lässt sich die Einführung in bestehende Projekte effizient gestalten.

React.lazy und Suspense

import { lazy, Suspense } from "react";

// Lazy-Loading-Komponenten
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
const Analytics = lazy(() => import("./pages/Analytics"));

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center h-64">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" />
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

Lazy Loading von Named Exports

// Named Export per Lazy Loading laden
const Chart = lazy(() =>
  import("./components/Chart").then((module) => ({
    default: module.BarChart,
  }))
);

// Generischer Helfer
function lazyNamed<T extends Record<string, any>>(
  factory: () => Promise<T>,
  name: keyof T
) {
  return lazy(() =>
    factory().then((module) => ({ default: module[name] }))
  );
}

const PieChart = lazyNamed(
  () => import("./components/Chart"),
  "PieChart"
);

Dynamic Import in Next.js

import dynamic from "next/dynamic";

// Nur clientseitig laden
const RichEditor = dynamic(() => import("./components/RichEditor"), {
  ssr: false,
  loading: () => <p>Editor wird geladen...</p>,
});

// Bedingtes Laden
const AdminPanel = dynamic(() => import("./components/AdminPanel"), {
  ssr: false,
});

function Page({ isAdmin }: { isAdmin: boolean }) {
  return (
    <div>
      <h1>Hauptinhalt</h1>
      {isAdmin && <AdminPanel />}
    </div>
  );
}

Routenbasiertes Splitting

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

// Aufteilen pro Route
const routes = [
  { path: "/", component: lazy(() => import("./pages/Home")) },
  { path: "/about", component: lazy(() => import("./pages/About")) },
  { path: "/blog/*", component: lazy(() => import("./pages/Blog")) },
  {
    path: "/admin/*",
    component: lazy(() => import("./pages/Admin")),
  },
];

function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          {routes.map(({ path, component: Component }) => (
            <Route key={path} path={path} element={<Component />} />
          ))}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Prefetch-Strategie

// Prefetch bei Mouseover
function PrefetchLink({
  to,
  factory,
  children,
}: {
  to: string;
  factory: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    factory(); // Prefetch starten
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

// Routen-Prefetch
const dashboardFactory = () => import("./pages/Dashboard");
const DashboardPage = lazy(dashboardFactory);

// In der Navigation verwenden
<PrefetchLink to="/dashboard" factory={dashboardFactory}>
  Dashboard
</PrefetchLink>

Bundle-Analyse

// webpack-bundle-analyzer Konfiguration
// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // Next.js-Konfiguration
});

# Bundle-Analyse ausführen
ANALYZE=true npm run build

Einsatz mit Claude Code

Prompt zur Einführung von Code Splitting mit Claude Code. Zum allgemeinen Performance-Verbesserungsansatz siehe SSR vs SSG Vergleich, zur Entwicklungseffizienz 10 Tipps für 3-fache Produktivität.

Optimiere die Bundle-Größe.
- Routenbasiertes Code Splitting einführen
- Große Bibliotheken (chart.js, moment etc.) auf Lazy Loading umstellen
- Ladezustände mit Suspense vereinheitlichen
- Bundle analysieren und Verbesserungsbericht erstellen

Details zu Code Splitting finden Sie in der offiziellen React-Dokumentation. Zur Nutzung von Claude Code siehe die offizielle Dokumentation.

Zusammenfassung

Code Splitting ist eine Performance-Optimierung, die sich direkt auf die Benutzererfahrung auswirkt. Wenn Sie Claude Code von der Bundle-Analyse bis zur Implementierung beauftragen, findet es effektive Splitting-Punkte und optimiert entsprechend.