Vite (pronounced “veet,” French for “fast”) is a build tool for frontend projects. It does two things:

1. Dev server — serves your code during development with instant hot reload
2. Bundler — bundles your code for production

It replaces Webpack, and it’s dramatically faster.

Why Vite is fast

Webpack bundles your entire app before the dev server starts. Big project? Wait 30 seconds.

Vite skips bundling during development. It serves files directly using native ES modules. The browser requests a file, Vite transforms it on the fly and sends it back. Startup is instant regardless of project size.

Webpack: Bundle everything → Start server → Wait...
Vite:    Start server → Transform files on demand → Instant

When you edit a file, Vite only updates that one file. Webpack often re-bundles large chunks. That’s why Vite’s hot reload feels instant.

Getting started

npm create vite@latest my-app

Pick your framework (React, Vue, Svelte, vanilla JS) and you’re running in seconds.

cd my-app
npm install
npm run dev    # Dev server on localhost:5173
npm run build  # Production build

Vite vs. Webpack

	Vite	Webpack
Dev server startup	Instant	Slow (bundles first)
Hot reload	Instant (single file)	Slower (re-bundles chunks)
Config	Minimal	Verbose
Production bundler	Rollup	Webpack
Learning curve	Low	High
Plugin ecosystem	Growing	Massive

When to use Vite

Use Vite for: new projects, React/Vue/Svelte apps, anything where you’d previously use Create React App or Webpack.

Stick with Webpack if: you have a large existing Webpack config that works, or you need a Webpack-specific plugin with no Vite equivalent.

Most modern frameworks use Vite under the hood: Astro, SvelteKit, Nuxt 3, and Remix all default to Vite.