Code Splitting

React 🟡 Mid

Definition

Technique qui decoupe le bundle JS en morceaux charges a la demande via React.lazy et import() dynamique, reduisant le temps de chargement initial.

Analogie

Comme un buffet a volonte : 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 requetes HTTP sans gain significatif.

Termes lies

#performance#interview