Code Splitting

React 🟡 Mid

Définition

Technique qui découpe le bundle JS en morceaux charges a la demande via React.lazy et import() dynamique, réduisant le temps de chargement initial.

Analogie

Comme un buffet a volonté : tu ne prends que ce que tu vas manger maintenant, pas tout le menu d'un coup.

Exemple de code

const AdminPanel = React.lazy(() => import('./AdminPanel'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      {isAdmin && <AdminPanel />}
    </Suspense>
  );
}

Cas d'usage

Pages lourdes (admin, dashboard), composants conditionels, routes non critiques.

Anti-pattern

Splitter des composants minuscules, augmentant le nombre de requêtes HTTP sans gain significatif.

Termes liés

#performance#interview

En entretien

Explique-moi ce qu'est le code splitting et comment tu le mets en place avec React.lazy.
Ça consiste à découper le bundle JS en morceaux chargés à la demande via React.lazy et import() dynamique, ce qui réduit le temps de chargement initial. On enveloppe le composant lazy dans un Suspense avec un fallback pendant le chargement.
Quand est-ce que tu éviterais de faire du code splitting ?
Sur des composants minuscules, car ça multiplie le nombre de requêtes HTTP sans gain significatif. Je le réserve plutôt aux pages lourdes comme un admin ou un dashboard, ou aux routes non critiques.

Fiche mise à jour le 2026-09-27