Vite

A fast build tool and dev server for modern web projects. Uses ES modules for instant dev server startup (no bundling), then Rollup for production builds. The default build tool for Vue, Svelte, and many React projects. Replaces webpack for new projects.

Created by

Evan You · Created Vite in 2020

Website X

When to use

Any new web project (React, Vue, Svelte, vanilla).
When dev server speed matters.
Library builds.

When not to

Legacy projects tied to webpack plugins.
When you need webpack-specific features (Module Federation is partially supported).

Definition

Vite serves code as native ES modules during development (the browser loads them directly, no bundling) — instant cold start and HMR. For production, it bundles with Rollup (tree-shaking, minification, code splitting). Supports plugins, TypeScript, JSX, CSS, and more out of the box.

Why it exists

Webpack bundles the entire app on startup (slow for large projects). Vite serves ES modules directly — dev server starts instantly and HMR is near-instant regardless of app size.

How it works

Dev: vite serves ES modules on demand; the browser requests only what it needs. Prod: vite build uses Rollup to bundle, tree-shake, minify, and code-split into static assets. Plugins transform code. Framework integrations (React, Vue, Svelte) via plugins.

Scaling limits

Dev/prod inconsistency is possible (different loaders). Very large apps can have slow Rollup production builds. Some webpack-specific plugins don't have Vite equivalents.

Cost shape

Free and open source.

Alternatives

webpack — More mature ecosystem, slower dev experience.
Turbopack — Faster than Vite, but Rust-based, less plugin support.
esbuild — Fastest, but less feature-rich.

Failure modes

Dev/prod inconsistency.
Plugin compatibility issues.
Missing environment variable handling.

webpack, TypeScript, React, Vue, Svelte