Cosa sono il code splitting e il tree shaking?

Question

IT Interview Practice · Accepted Answer

Entrambi riducono il JavaScript che gli utenti scaricano. Il **code splitting** suddivide il bundle in chunk caricati on demand; il **tree shaking** rimuove il codice che non usi mai. Sono complementari: suddividi *cosa* si carica, scuoti via il codice *morto* dentro ogni chunk.

## Code splitting

Invece di un unico grande bundle, l'app viene suddivisa così ogni route o feature pesante è un chunk separato scaricato solo quando serve:

```js
// Split per route: il codice della dashboard non viene scaricato finché non la visiti
const Dashboard = lazy(() => import("./routes/Dashboard")); // il suo chunk

// Split per componente: editor pesante caricato all'interazione
button.onclick = async () => {
  const { openEditor } = await import("./editor"); // scaricato al click
  openEditor();
};
```

L'`import()` dinamico è il segnale — il bundler emette un file separato a quel confine.

## Tree shaking

Il bundler analizza staticamente gli `import`/`export` dei moduli ES e scarta gli export che nulla referenzia. Funziona solo con **ESM** (statico, analizzabile) — non con il `require` di CommonJS:

```js
import { debounce } from "utils"; // viene mantenuto solo debounce; throttle, ecc. vengono scossi via
```

Si affida a `"sideEffects": false` nel `package.json` e agli import per singola funzione; i barrel file o i moduli con side effect possono vanificarlo.

## Compromessi

- Splitting eccessivo → tante richieste minuscole e waterfall; raggruppa il codice correlato.
- Il tree shaking è fragile — un side effect segnato male mantiene il codice morto.

## Perché è importante

Questi sono i due leveraggi dietro il "inviare meno JS". Gli intervistatori vogliono che tu sappia che il code splitting decide *cosa si carica e quando*, il tree shaking decide *cosa c'è dentro del tutto*, e che il tree shaking dipende dagli ESM statici — un dettaglio che distingue chi ha davvero messo a punto un bundle da chi ne ha solo letto.

Code splitting

Tree shaking

Compromessi

Perché è importante

Domande correlate