What Is Vite? The Modern Front-End Build Tool

Vite (French for “fast”) is a front-end build tool and development server that treats modern browsers as first-class citizens. In development it serves your source files over native ES modules, letting the browser handle the module graph itself. For production it bundles everything with Rollup into optimized, minified assets. The result: a development experience that starts in milliseconds and stays fast, no matter how large the project grows.

The problem Vite solved

Before Vite, the dominant dev workflow used Webpack: on startup, Webpack would bundle every module in your app into one or more files, resolve all imports, and spin up a server. On a large codebase that took tens of seconds — sometimes longer. Every edit triggered a full or partial re-bundle before the browser could see the change.

The root cause was architectural: Webpack was designed for a browser world without native ES module support. By 2020 every major browser understood import/export natively, but the tooling hadn’t caught up.

Vite’s insight was to skip the bundling step entirely in development. The browser requests modules on demand, Vite serves them individually, and only the module you just edited needs to be re-processed. Hot module replacement (HMR) becomes nearly instant regardless of project size.

How development mode works

When you run vite in a project, the server:

1. Pre-bundles dependencies using esbuild (written in Go, 10–100× faster than JavaScript-based tools). Node modules like React or lodash are converted once to ESM and cached.
2. Serves source files on demand. Your own code is transformed on request — TypeScript is stripped, JSX is converted — but never bundled together.
3. Delivers HMR updates as module patches. When you save a file, Vite sends only the changed module to the browser. Frameworks wire their component models into this to preserve local state during edits.

The dev server never needs to walk the entire module graph upfront. Time-to-interactive after vite is typically under 300 ms regardless of how many files the app has.

The production build

Development and production use different strategies on purpose.

For production, Vite runs Rollup to bundle everything: tree-shaking removes unused code, chunks are split for optimal caching, and assets are fingerprinted. Rollup’s output is small and predictable. The resulting bundle is what gets deployed — not the individual ESM files, because loading hundreds of small modules over HTTP still has overhead.

You kick off a build with:

npm run build   # runs vite build under the hood

Output lands in dist/ by default, ready to deploy to any static host.

Getting started

Scaffolding a new project takes one command:

npm create vite@latest my-app

Vite’s CLI will ask you to pick a framework — React, Vue, Svelte, Preact, Lit, Vanilla — and a language variant (JavaScript or TypeScript). The resulting project is minimal: a vite.config.js (or .ts), an index.html, and a src/ folder. No generated Webpack config to decode.

If you’re coming from TypeScript, Vite handles .ts files out of the box via esbuild’s transpilation — though it doesn’t type-check at build time (use tsc --noEmit for that in CI).

Framework support and the ecosystem

Vite is framework-agnostic by design, but it has become the official or default build tool for several major projects:

• Astro uses Vite internally for asset handling and dev server.
• SvelteKit adopted Vite as its build foundation.
• Nuxt 3 (Vue’s meta-framework) migrated to Vite.
• Remix supports Vite as its compiler.

The plugin API extends Vite’s behavior: plugins can intercept module transforms, add virtual modules, or inject content into index.html. Because Vite’s plugin format is a superset of Rollup’s, most Rollup plugins work in Vite without modification.

Tailwind CSS v4 ships a first-party Vite plugin that handles stylesheet processing tightly integrated with HMR.

What’s next: Rolldown

Vite’s one architectural tension is that development uses esbuild while production uses Rollup — two different tools with different behaviors. Edge cases can surface where code works in dev but breaks in the build.

Rolldown is a Rollup-compatible bundler written in Rust, being developed specifically to replace both esbuild and Rollup in Vite. When it lands in a stable Vite major version, both dev and prod will use the same underlying engine — faster, more consistent, and easier to reason about.

If you want to understand what JavaScript is before diving into its tooling ecosystem, that’s a natural starting point. And if you’re evaluating runtimes, the Bun vs Node comparison is worth reading alongside the Vite story, since both represent the same push toward faster, lower-friction JavaScript tooling.

The takeaway

Vite solved the slow Webpack dev-server problem by leaning on native ES modules — the browser loads what it needs, when it needs it, and only changed modules get reprocessed. For production, Rollup delivers optimized bundles. It’s now the default build tool for most of the major front-end meta-frameworks, and with Rolldown on the horizon, the architecture is getting even more unified. If you’re starting a new front-end project in 2026, Vite is the sensible default.