Optimiser le code splitting et le lazy loading avec Claude Code

La nécessité du code splitting

Quand la taille du bundle d’une SPA augmente, le chargement initial devient lent. En implémentant correctement le code splitting et le lazy loading, seul le code nécessaire est chargé au moment opportun. Avec Claude Code, l’intégration dans un projet existant est aussi efficace.

React.lazy et Suspense

import { lazy, Suspense } from "react";

// Composants chargés paresseusement
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 des Named Exports

// Chargement paresseux de named exports
const Chart = lazy(() =>
  import("./components/Chart").then((module) => ({
    default: module.BarChart,
  }))
);

// Helper générique
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"
);

Import dynamique Next.js

import dynamic from "next/dynamic";

// Chargement côté client uniquement
const RichEditor = dynamic(() => import("./components/RichEditor"), {
  ssr: false,
  loading: () => <p>Chargement de l'éditeur...</p>,
});

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

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

Splitting basé sur les routes

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

// Splitting par 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>
  );
}

Stratégie de prefetch

// Prefetch au survol de la souris
function PrefetchLink({
  to,
  factory,
  children,
}: {
  to: string;
  factory: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    factory(); // Début du prefetch
  };

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

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

// Utilisation dans la navigation
<PrefetchLink to="/dashboard" factory={dashboardFactory}>
  Tableau de bord
</PrefetchLink>

Analyse du bundle

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

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

# Exécution de l'analyse du bundle
ANALYZE=true npm run build

Utilisation avec Claude Code

Voici un prompt pour demander à Claude Code d’introduire le code splitting. Pour une approche globale de l’amélioration des performances, consultez aussi Comparaison SSR vs SSG, et pour l’efficacité de développement, 10 astuces pour tripler votre productivité.

Optimise la taille du bundle.
- Introduire le code splitting basé sur les routes
- Charger paresseusement les bibliothèques lourdes (chart.js, moment, etc.)
- Unifier les états de chargement avec Suspense
- Analyser le bundle et produire un rapport d'amélioration

Pour les détails du code splitting, consultez la documentation officielle de React. Pour l’utilisation de Claude Code, consultez la documentation officielle.

Résumé

Le code splitting est une optimisation de performance directement liée à l’expérience utilisateur. En confiant à Claude Code l’analyse du bundle jusqu’à l’implémentation, vous pouvez identifier les points de division efficaces et optimiser.