Overview
What Vite is, why the native-ESM dev server exists, and how it compares to bundler-first tools like webpack.
Third-party documentation. This is independently authored analysis of the public Vite codebase — not the official docs, and not reviewed or endorsed by the Vite team.
Vite
Vite is a frontend build tool built around a simple observation: browsers have native ESM support, so a dev server doesn't need to bundle your application — it needs to hand the browser the files, transforming only what's asked for, on demand. That choice gives near-instant cold starts and fast Hot Module Replacement (HMR) regardless of project size, because the work done per change scales with the changed module, not the whole graph.
Why it exists
Webpack-era tooling pays an upfront cost: the entire dependency graph is bundled before the dev server can serve anything, and every edit re-bundles (or at least re-processes) a large portion of that graph. Vite inverts this for development by leaning on native ESM and esbuild, and only switches to a full bundler (Rollup) for the production build, where tree-shaking and chunk-splitting actually earn their cost.
Where it sits in the ecosystem
- esbuild — pre-bundles npm dependencies and transforms TS/JSX in the dev server; written in Go, it is far faster than JS-based equivalents.
- Rollup — the production bundler; Vite reuses Rollup's plugin ecosystem and its tree-shaking/chunking output model.
- create-vite — the scaffolding CLI with official templates for React, Vue, Svelte, Solid, Preact, Lit, and vanilla, each in JS and TypeScript variants.
- Frameworks — Vite is framework-agnostic; plugins like
@vitejs/plugin-reactand@vitejs/plugin-vueadd framework-specific transforms and Fast Refresh.