# 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.

> Pagina: https://ui.eneawork.it/blog/bundle-size-ui-library
> Markdown: https://ui.eneawork.it/blog/bundle-size-ui-library.md

*2026-10-31*

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

## 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/*.js

## Il 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

Se vuoi partire da un componente già misurato, apri il catalogo e controlla dipendenze e licenza nel record.

## FAQ

### 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.