npmBeginner-friendly

vite

Native-ESM powered web dev build tool

build-toolhmresmodulesfrontendbundlerframeworkdev-servervite

The Problem

Webpack bundles your entire application before the dev server starts — for large apps this takes 30-60 seconds on cold start, and HMR updates take 5-10 seconds. Evan You built Vite on the insight that modern browsers can load ES modules natively, eliminating the need to bundle at all during development.

Mental Model

In dev mode, Vite serves your source files directly as native ES modules — no bundling. The browser requests a file, Vite transforms it (TypeScript, JSX, CSS) on demand and sends it back in milliseconds. HMR works at the module level: change a component, only that module updates. For production, Vite uses Rollup to create an optimised bundle.

60-second start

Install vite

npm install vite
import { } from 'vite';

Use it when

Use Vite for any modern frontend project: React, Vue, Svelte, or vanilla JavaScript. It's the current standard for new projects, replacing Create React App. Also use it as the build tool underlying frameworks like Astro and SvelteKit.

Skip it when

For server-rendered apps (Next.js, Remix, Nuxt), the framework handles the build tool. For very old browsers that don't support ES modules, you'll need additional configuration. Large monorepos may need Turborepo or Nx on top of Vite to manage builds across packages.

Alternatives

webpackOlder but extremely configurable — still necessary for complex legacy setups or when you need fine-grained chunk splitting

esbuildThe fastest bundler; Vite uses it internally for transforms but lacks esbuild's raw speed for full bundles

turbopackVercel's Webpack replacement built in Rust — deeply integrated with Next.js, may replace Vite for that ecosystem

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.