Vite (French for “fast,” pronounced “veet”) is a build tool for modern web projects. It does the same job as Webpack — bundling your JavaScript, CSS, and assets for production — but it’s dramatically faster during development.

Vite was created by Evan You (the creator of Vue.js) and has become the default build tool for Vue, React, Svelte, and many other frameworks.

Why Vite is fast

The key insight: during development, Vite doesn’t bundle your code at all.

Webpack approach: Bundle everything → serve the bundle → rebundle on every change (slow)

Vite approach: Serve source files directly using native ES modules → only transform the file you changed (fast)

When you save a file, Vite only processes that one file and pushes the update to the browser. It doesn’t rebuild your entire app. This means hot module replacement (HMR) is nearly instant, even on projects with thousands of files.

For production builds, Vite uses Rollup to create optimized bundles with tree-shaking, code splitting, and minification.

Getting started

# Create a new project
npm create vite@latest my-app

# Pick your framework: React, Vue, Svelte, etc.
# Pick TypeScript or JavaScript

cd my-app
npm install
npm run dev    # starts dev server in ~200ms

Configuration

Vite works with zero config for most projects. When you need customization:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

What Vite supports out of the box

• TypeScript (no config needed)
• JSX/TSX
• CSS Modules (.module.css)
• PostCSS (auto-detected from postcss.config.js)
• JSON imports
• Static assets (images, fonts, SVGs)
• Web Workers
• Environment variables (.env files)

No loaders to configure. No babel config. It just works.

Vite vs Webpack

	Vite	Webpack
Dev server start	~200ms	10-30s
HMR speed	Instant	1-5s
Config complexity	Minimal	Complex
Plugin ecosystem	Growing	Massive
Production bundler	Rollup	Webpack

Vite wins on developer experience. Webpack wins on ecosystem maturity and edge-case handling. For new projects, Vite is the clear choice.

Who uses Vite?

• Vue.js (default since Vue 3)
• SvelteKit
• Astro
• Nuxt 3
• Vitest (testing framework)
• Storybook (optional)
• Laravel (default frontend tooling)

React doesn’t ship with Vite by default, but npm create vite@latest with the React template is the recommended way to start a new React project (Create React App is deprecated).

FAQ

Can I migrate an existing Webpack project to Vite?

Yes, and for most projects it’s straightforward. Replace your webpack.config.js with a vite.config.js, swap Webpack loaders for Vite plugins, and update your npm scripts. The main friction points are Webpack-specific features like require.context or custom loader chains that need Vite equivalents.

Does Vite work with older browsers?

Vite’s dev server requires a modern browser that supports ES modules (all current browsers do). For production builds, Vite uses @vitejs/plugin-legacy to generate polyfilled bundles that work in older browsers like IE11. By default, production targets browsers with native ESM support.

Is Vite only for frontend projects?

Primarily yes, but Vite also supports library mode for building npm packages and SSR (Server-Side Rendering) for frameworks like Nuxt and SvelteKit. It’s not designed for pure backend Node.js projects — for those, you’d use tsc or tsx directly.

Learn more

• What is Webpack? — the tool Vite replaces
• JavaScript complete guide — the language behind it all
• React complete guide — building UIs with Vite
• TypeScript complete guide — type safety with zero config in Vite
• npm complete guide — managing packages