Performance
Bundle size delle UI library: quello che le docs non dicono
Il numero sul sito della libreria non è il costo nel tuo progetto. Ecco cosa pesa davvero, come misurarlo e le cinque domande da fare prima di scegliere.
In sintesi
- Misura il bundle della tua pagina, non il pacchetto npm.
- Icone, date, motion e chart sono spesso più pesanti del componente.
- Tree shaking e import mirati contano più del numero di componenti offerti.
Una libreria può dichiarare “leggera” e aggiungere 80 KB al tuo progetto. Il numero che conta non è quello del pacchetto: è quello che arriva al browser dopo il tree shaking, con le tue import e i tuoi polyfill.
Cosa pesa davvero
- React e React DOM: la base, quasi sempre condivisa.
- Icone: un set intero importato per errore può superare il componente.
- Motion: una libreria di animazione pesa più di un CSS transition.
- Date: formattazione e timezone sono un costo nascosto.
- Chart: una singola dashboard può valere metà del bundle.
Come misurarlo
Parti dal build di produzione, non dal dev server. Guarda i chunk, il gzip e il costo per route. Poi ripeti dopo aver eliminato una dipendenza: se il numero non cambia, non era quella la causa.
npm run build
npx vite-bundle-visualizer
# oppure
npx source-map-explorer dist/assets/*.jsIl caso EneUI
Il bundle entry della home EneUI è oggi circa 137,9 KB minificati e 43,2 KB gzip, con React in un chunk vendor separato. Abbiamo scelto di incorporare `web-vitals` invece di caricarlo come richiesta separata: 4,6 KB in più nel bundle, una richiesta in meno nella dependency tree.
È un esempio del compromesso reale: il numero più piccolo non è sempre la pagina più veloce. Contano catena di richieste, cache, parsing ed esecuzione.
Le cinque domande al venditore
| Domanda | Perché |
|---|---|
| Il componente è tree-shakable? | Un import può trascinare l’intera libreria |
| Le icone sono incluse? | Spesso sono il vero peso |
| Quante dipendenze transitive? | Il costo non è nel package.json principale |
| Qual è il costo della route, non del pacchetto? | Il browser paga il bundle, non npm |
| C’è una versione senza JS? | Per contenuto e SEO, il markup deve esistere |
Se vuoi partire da un componente già misurato, apri il catalogo e controlla dipendenze e licenza nel record.
Domande frequenti
Quanto deve pesare una UI library?
Non esiste una soglia unica. Una pagina marketing dovrebbe stare sotto poche centinaia di KB di JS; una dashboard può averne di più. Misura la route, non il pacchetto.
Il gzip è il numero giusto?
È il numero che viaggia sulla rete. Per il costo di esecuzione conta anche il parse e il numero di moduli.
Le icone contano davvero?
Sì. Un set importato in blocco può pesare più del componente che stai usando. Importa solo le icone necessarie.
Meglio CSS o JS per le animazioni?
Per transizioni semplici, CSS. Per orchestrazione, gesture e layout condivisi, una libreria JS può valere il costo.
Come riduco il bundle senza riscrivere tutto?
Parti dalle route, rimuovi import inutilizzati, controlla le icone e sostituisci una dipendenza alla volta misurando il risultato.