Vite

Build Tools

Next generation frontend tooling

weekly downloads53.5M

versionv7.3.1

licenseMIT

Instant HMRESM-native dev serverRollup-based production build

Overview

Vite is a next-generation frontend build tool that fundamentally changes how developers experience local development. Created by Evan You in 2020, it leverages native ES Modules in browsers to serve source code on-demand rather than bundling everything upfront. This architectural shift eliminates the cold-start problem that plagues traditional bundlers, especially in large codebases.

The tool divides your application into two categories: dependencies (third-party code that rarely changes) and source code (your application files). Dependencies are pre-bundled once using esbuild—a Go-based bundler that's 10-100x faster than JavaScript alternatives—and aggressively cached. Source code is served as native ESM, with the browser requesting modules as needed. This approach means Vite can start a dev server almost instantly regardless of project size.

With over 53 million weekly downloads, Vite has become the de facto standard for modern JavaScript frameworks. It powers the official scaffolding tools for Vue 3, React (via create-vite), and Svelte. The tool's plugin system is compatible with Rollup, giving developers access to a mature ecosystem. For production builds, Vite uses Rollup to generate optimized bundles with automatic code splitting, tree-shaking, and asset optimization.

Vite's most significant contribution is proving that Hot Module Replacement (HMR) can remain consistently fast. Traditional bundlers slow down as applications grow because they must re-bundle increasing amounts of code. Vite's HMR only invalidates the specific module chain affected by your changes, typically updating the browser in under 50ms even in massive applications. This creates a development experience where code changes feel instantaneous.

Quick Start

typescript

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 3000,
    open: true
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'ui-lib': ['@/components/Button', '@/components/Input']
        }
      }
    }
  }
});

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// package.json scripts
// "scripts": {
//   "dev": "vite",
//   "build": "vite build",
//   "preview": "vite preview"
// }

Use Cases

Single-Page Applications (SPAs): Build React, Vue, or Svelte applications with near-zero configuration. Vite handles JSX/TSX transformation, CSS modules, and asset imports out of the box, making it ideal for greenfield projects that need fast iteration cycles.

Component Libraries: Develop and test UI component libraries with instant feedback. Vite's library mode compiles components as reusable packages with proper externalization of dependencies, suitable for publishing to npm.

Static Site Generation: Use Vite as the foundation for SSG frameworks like VitePress or Astro. Its fast dev server makes content editing responsive, while its build optimization ensures performant static output.

Micro-frontends: Build individual micro-frontend modules with Vite's multi-entry configuration. Each module benefits from fast HMR during development and can be deployed independently.

TypeScript Projects: Leverage Vite's native TypeScript support without complex webpack configurations. It uses esbuild for transpilation (type-checking happens in parallel via IDE or tsc), making TS compilation nearly instant during development.

Pros & Cons

Pros

+Dev server starts instantly regardless of project size, with HMR that remains consistently fast even in massive codebases
+Zero-config support for TypeScript, JSX, CSS modules, and modern frameworks with sensible defaults that just work
+Production builds use Rollup for mature, battle-tested optimization with automatic code splitting and tree-shaking
+Rollup-compatible plugin ecosystem provides access to hundreds of existing plugins plus Vite-specific enhancements
+Dependency pre-bundling with esbuild converts CommonJS/UMD to ESM and dramatically speeds up cold starts

Cons

−Browser must support native ES Modules, which can cause issues testing legacy browser compatibility during development
−Different behavior between dev (esbuild) and production (Rollup) can occasionally surface bugs that only appear in builds
−Some CommonJS libraries with complex exports may require manual configuration to work properly with ESM
−Plugin ecosystem, while growing rapidly, is still smaller than webpack's decade-long collection
−Server-side rendering requires additional setup compared to Next.js or Nuxt, though frameworks like SvelteKit fill this gap

Comparisons

vite vs webpackbuild-tool →vite vs esbuildbuild-tool →vite vs parcelbuild-tool →

Install

bash

npm install vite

bash

pnpm add vite

bash

bun add vite

↗ View full npm package details