Code splitting per route: caricare solo il codice della pagina

Il code splitting per route divide il bundle in un file per pagina, così la prima visita scarica solo il codice che le serve. Il build di questo sito produce 48 file JavaScript, ma la home ne richiede uno solo.

Un import dinamico per route

import { lazy, Suspense } from "react";

const Components = lazy(() => import("./pages/Components"));
const Blocks = lazy(() => import("./pages/Blocks"));

export function Routes({ tab }) {
  return (
    Loading}>
      {tab === "components" ?  : }
    
  );
}

Ogni import() crea un punto di separazione: Vite emette un file per il modulo raggiunto solo da quel punto. Il codice condiviso da più route finisce nel chunk comune, non duplicato in ognuna.

Quattro modi di spezzare

Dove si vede il guadagno

L'entry non si restringe: resta a 141.302 byte perché contiene React e il router. Il guadagno è nei chunk che la home non richiede: Blocks pesa 22.130 byte e arriva solo quando apri quella pagina. Su una visita alla home il risparmio è la somma dei chunk che non scarichi.

Il comando

npx vite build --mode production

L'output elenca ogni file con la dimensione in kB e scrive client/dist. Aggiungi --sourcemap quando devi capire quale modulo finisce in quale chunk.

La limitazione

Le dimensioni del build non sono byte trasferiti: 48 file esistono su disco, ma una visita ne scarica pochi. Spezzare troppo crea round trip in più sulle route profonde, e un chunk duplicato pesa più dell'entry che volevi evitare. Leggi le richieste nel pannello Network, non la cartella dist.

Dove continuare

Il catalogo EneUI indicizza 111.985 componenti e 1.556 blocchi con preview. Il record sidebar è un componente fatto di più file: importato staticamente finisce nell'entry. Per il peso di un singolo import leggi un import che aumenta il bundle, per la compressione Brotli contro gzip, per il confronto tra librerie il peso delle librerie UI, per la parte di CSS che blocca il paint il CSS critico.