Cosa fa crescere un bundle JS e perché la dimensione è dannosa?

Question

IT Interview Practice · Accepted Answer

Un **bundle** è il JavaScript che il tuo build tool impacchetta e invia al browser. Cresce principalmente per via delle **dipendenze**, del **codice duplicato** e del fatto di **inviare codice di cui la pagina non ha ancora bisogno**.

## Cosa lo gonfia

- **Librerie pesanti** — una singola libreria di date o icone può aggiungere centinaia di KB. Importare tutto `lodash` per una sola funzione trascina dentro l'intera libreria.
- **Importare tutto** invece di ciò che usi:

```js
import _ from "lodash";           // ~70KB — l'intera libreria
import debounce from "lodash/debounce"; // ~2KB — solo la funzione che ti serve
```

- **Nessun code splitting** — l'intera app (ogni route, ogni modale) è impacchettata in un unico file caricato all'inizio.
- **Polyfill e dipendenze duplicate** — due versioni dello stesso pacchetto incluse due volte.

## Perché la dimensione è dannosa

I byte sono il problema piccolo; il **parsing e l'esecuzione** del JS sono quello grande. Il browser deve scaricare, poi parsare, compilare ed eseguire ogni byte sul main thread — e questo è molto più lento su un telefono di fascia media che su un laptop. Il JS pesante ritarda l'interattività e peggiora direttamente **INP** e **LCP**.

## Perché è importante

"Aggiungiamo semplicemente la libreria" è il modo in cui le app diventano lente di nascosto. Gli intervistatori vogliono vederti ragionare sul *costo per dipendenza* e ricorrere agli import per singola funzione, al tree shaking e al code splitting prima che il bundle si gonfi — soprattutto perché i telefoni dei tuoi utenti sono molto più deboli della tua macchina di sviluppo.

Cosa lo gonfia

Perché la dimensione è dannosa

Perché è importante

Domande correlate