Vite is a next-generation frontend build tool created by Evan You that leverages native ES modules and, since Vite 8 (March 2026), a single Rolldown Rust-based bundler for both development and production. Earlier versions used esbuild for dev pre-bundling and Rollup for production; Vite 8 unifies both under Rolldown with Oxc for JS transforms and minification, delivering 10–30x faster production builds. This dual shift—unbundled ESM dev server for instant HMR plus Rolldown-powered optimized builds—makes Vite the de facto build tool for Vue, React, Svelte, and virtually every modern framework project.
What This Cheat Sheet Covers
This topic spans 22 focused tables and 179 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Concepts
| Concept | Example | Description |
|---|---|---|
Browser loads <script type="module"> directly | • Vite serves source code as native ES modules during dev • browser handles imports without bundling, enabling instant server start | |
node_modules/.vite/deps/ folder created | Dependencies are pre-bundled (Rolldown in Vite 8, previously esbuild) to convert CommonJS/UMD to ESM and reduce HTTP requests | |
Edit component → instant browser update | • Changes reflect in browser without full page reload • HMR API accepts module updates and preserves application state | |
Introduced in Vite 8 as single unified bundler | • Rust-based bundler replacing both esbuild and Rollup in Vite 8 • 10–30x faster than Rollup, matching esbuild speed; handles dev optimizer and production build | |
JS transforms & minification via Oxc | • Rust-based JS toolchain (parser, transformer, minifier) replacing esbuild in Vite 8 • 'oxc' is now default build.minify value |