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 si candida a nuovo standard: SvelteKit nasce già su Vite, e nei mesi successivi è attesa l’adozione da parte di Nuxt 3, Astro e altri meta-framework. create-vite è destinato a sostituire create-react-app come scaffolding di riferimento.
Nel contesto italiano
L’adozione nei team frontend italiani è destinata a crescere nei mesi successivi alla release, man mano che i meta-framework migrano al nuovo dev server.
Riferimenti: Vite 2.0 (16 febbraio 2021). Evan You. Licenza MIT. esbuild (dev), Rollup (prod). Framework-agnostic.