The webpack slowness problem
In modern 2018-2020 frontend projects, Webpack dev server startup takes dozens of seconds for medium-sized applications, with hot reload slowing as code grows. Structural cause: Webpack bundles everything even in dev, even when the browser natively supports ES modules.
Vite, conceived by Evan You (Vue.js creator) in 2020, changes approach: no bundle in development. Every native ES import is served as a single file; the browser asks only for actually used modules. In production it uses Rollup for optimised bundles.
Version 2.0 of 16 February 2021 is the first fully framework-agnostic. MIT licence.
Architecture
- Dev server — serves every source as native ES module, with just-in-time transformations
- esbuild (Go, by Evan Wallace) — for dependency pre-bundling (avoids importing hundreds of
node_modulesfiles) - Rollup — for production build
- Custom HMR very fast
The name “Vite” (French: “fast”) is evocative: startup times are measured in milliseconds, not seconds.
Framework support
Vite 2 supports out-of-the-box:
- Vue 2, 3
- React, with Fast Refresh
- Svelte
- Preact, Lit, Solid
- TypeScript, JSX, CSS/PostCSS/Sass/Less
- Vanilla JS, Web Components
Plugin API inherited from Rollup.
Impact
Vite is poised to become the new standard: SvelteKit is born on Vite, and in the following months Nuxt 3, Astro and other meta-frameworks are expected to adopt it. create-vite is set to replace create-react-app as reference scaffolding.
In the Italian context
Adoption in Italian frontend teams is expected to grow in the months following the release, as meta-frameworks migrate to the new dev server.
References: Vite 2.0 (16 February 2021). Evan You. MIT licence. esbuild (dev), Rollup (prod). Framework-agnostic.