𝗦𝗲𝗺𝗽𝗹𝗶𝗳𝗶𝗰𝗮𝗻𝗱𝗼 𝗩𝗶𝘁𝗲
Gli strumenti datati come Webpack o CRA funzionano raggruppando l'intero progetto fin dall'inizio. Leggono ogni file e li combinano in un unico grande file JavaScript. Questo approccio funziona per i piccoli progetti, ma fallisce con i grandi progetti che contengono migliaia di moduli. I bundle di grandi dimensioni richiedono secondi o minuti per essere generati. Ogni volta che salvi un file, lo strumento ricostruisce gran parte del bundle.
Vite funziona in modo diverso. I browser moderni supportano nativamente gli ES modules. Vite non esegue il bundling del codice durante lo sviluppo. Serve ogni file come un modulo separato solo quando il browser lo richiede.
Immagina un ristorante a buffet. Lo chef cucina ogni singolo piatto prima che le porte si aprano. Se desideri una piccola modifica, lo chef deve rifare gran parte del buffet. Devi aspettare molto tempo per il tuo cibo. È così che funziona Webpack.
Ora pensa a un ristorante à la carte. Le porte si aprono immediatamente. Ordini un piatto. Lo chef prepara solo quel piatto. Se più tardi vuoi un dolce, lo chef prepara solo il dolce. Non devi aspettare che l'intero menu venga cucinato. È così che funziona Vite.
Vite utilizza due strategie diverse per due esigenze differenti:
Sviluppo (vite dev)
- Strategia: Serve moduli ESM nativi senza bundling.
- Velocità: Istantanea. Non dipende dalla dimensione del progetto.
- Perché: Le richieste di rete locale sono veloci.
Produzione (vite build)
- Strategia: Raggruppa tutto utilizzando Rolldown.
- Velocità: Dipende dalla dimensione del progetto.
- Perché: Centinaia di file separati creerebbero troppe richieste HTTP per gli utenti reali. Il bundling rende il sito finale più veloce per loro.
Vite ti offre velocità mentre scrivi il codice e prestazioni al momento del lancio.
Fonte: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62