Il problema della lentezza di webpack
Nei progetti frontend moderni degli anni 2018-2020, lo start-up del dev server con Webpack dura decine di secondi per applicazioni di medie dimensioni, con hot reload che rallenta con la crescita del codice. La causa strutturale: Webpack bundla tutto anche in dev, anche quando il browser supporta nativamente ES modules.
Vite, pensato da Evan You (creatore di Vue.js) nel 2020, cambia approccio: in development, no bundle. Ogni import ES nativo è servito come singolo file; il browser chiede solo i moduli effettivamente usati. In produzione usa Rollup per bundle ottimizzato.
La versione 2.0 del 16 febbraio 2021 è la prima completa framework-agnostic. Licenza MIT.
Architettura
- Dev server — serve ogni sorgente come ES module nativo, con trasformazioni just-in-time
- esbuild (Go, di Evan Wallace) — per pre-bundling delle dipendenze (evita import di centinaia di file
node_modules) - Rollup — per production build
- HMR custom velocissimo
Il nome “Vite” (francese: “rapido”) è scelta evocativa: i tempi di start-up si misurano in millisecondi, non secondi.
Framework support
Vite 2 supporta out-of-the-box:
- Vue 2, 3
- React, con Fast Refresh
- Svelte
- Preact, Lit, Solid
- TypeScript, JSX, CSS/PostCSS/Sass/Less
- Vanilla JS, Web Components
Plugin API mutuata da Rollup.
Impatto
Vite diventa rapidamente nuovo standard:
- SvelteKit (2021) basato su Vite
- Astro (2022) usa Vite
- Nuxt 3 (2022) usa Vite
- Remix (2023) migra a Vite
- create-vite sostituisce create-react-app come scaffolding
Nel contesto italiano
Adozione ampia in tutti i team frontend dal 2022 in avanti.
Riferimenti: Vite 2.0 (16 febbraio 2021). Evan You. Licenza MIT. esbuild (dev), Rollup (prod). Framework-agnostic. Base di SvelteKit, Astro, Nuxt 3, Remix.