Performance
Tree shaking: come funziona davvero
Il tree shaking elimina il codice mai importato solo se i moduli sono ESM e senza effetti collaterali. Una prova con esbuild: 145 byte contro 59.
In sintesi
- Il tree shaking elimina gli export mai importati, non il codice che usi.
- Funziona sui moduli ESM e su quelli dichiarati senza effetti collaterali.
- Nella nostra fixture con esbuild 0.21.5 l'output passa da 145 a 59 byte con sideEffects: false.
- Un modulo CommonJS o un polyfill importato per l'effetto non viene scartato.
Il tree shaking elimina il codice esportato e mai importato: funziona sui moduli ESM e lascia stare tutto ciò che il bundler non può dimostrare privo di effetti collaterali. Nella nostra prova la differenza è 145 byte contro 59.
Le tre condizioni
| Condizione | Perché conta | Come si rompe |
|---|---|---|
| Modulo ESM | Gli export sono statici e analizzabili | Un require in mezzo al modulo |
| sideEffects: false | Autorizza a scartare il file intero | Un polyfill importato per l'effetto |
| Export nominati | Il bundler sa cosa è usato | Un default export con tutto dentro |
Se manca una delle tre, il bundler tiene il codice per sicurezza. Non è pigrizia: un modulo può registrare un custom element o toccare window appena viene importato.
Riprodurre la prova
npx esbuild entry.js --bundle --minify --format=esm --outfile=out.js && wc -c out.jsIl comando richiede Node e npx, più un entry.js che importi un solo export. Aggiungi sideEffects: false nel package.json della libreria e rilancia: se il file cala, il modulo inutilizzato era tenuto per i suoi effetti.
Cosa resta fuori
- CommonJS: il bundler non può escludere un export letto a runtime.
- Classi con effetti nel costruttore: il codice resta perché il bundler non lo esegue.
- Import per effetto voluti: fogli di stile, polyfill e registrazione di custom element non vanno scartati.
Il limite da dichiarare
Il tree shaking non riduce il codice che usi davvero: se un componente importa l'intera libreria di icone, il peso resta. La differenza tra 145 e 59 byte si vede su un modulo, non su un'applicazione; sui progetti grandi il guadagno arriva dai pacchetti con export nominati e dal controllo di cosa finisce nel grafo.
Dove continuare
Il catalogo EneUI indicizza 111.985 componenti, 12.808 icone e il record 3D carousel: un componente che importa l'intero set di icone non perde nulla al build. Per il singolo import che gonfia il bundle leggi un import che aumenta il bundle, per il costo di render il profiler di React, per il confronto misurato tra pacchetti alternative a MUI 2026.
Domande frequenti
Tree shaking e minify sono la stessa cosa?
No. Il minify accorcia i nomi e toglie gli spazi, il tree shaking elimina le dichiarazioni mai usate prima della minificazione.
Perché la mia libreria non perde peso?
Perché è CommonJS o perché il package.json non dichiara sideEffects: false. In entrambi i casi il bundler tiene il codice per sicurezza.
sideEffects: false può rompere qualcosa?
Sì, se un modulo importato per il suo effetto viene scartato. In quel caso elenca i file con effetti in un array al posto di false.
Il tree shaking funziona con il CSS?
No, i fogli di stile sono import per effetto. Per il CSS si usa un plugin che rimuove le regole non usate, con risultati parziali.
Da dove arriva la differenza tra 145 e 59 byte?
Da un modulo esportato e mai importato. Con sideEffects: false sparisce, senza il campo il bundler lo tiene perché registra qualcosa su window.