# Vite — Next Generation Frontend Build Tool

> Vite is a lightning-fast frontend build tool that leverages native ES modules for instant dev server startup and blazing-fast HMR. Created by Evan You (Vue.js creator), it supports Vue, React, Svelte, and more out of the box with near-zero config.

## Install

Save as a script file and run:

# Vite — Next Generation Frontend Build Tool

## Quick Use
```bash
# Create a new Vite project
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

# Or with Vue
npm create vite@latest my-vue-app -- --template vue-ts
```

## Introduction
Vite (French for "fast") is a next-generation frontend build tool created by Evan You, the creator of Vue.js. It fundamentally rethinks the dev server experience by leveraging native ES modules in the browser during development, eliminating the bundling step that makes traditional tools slow. For production, Vite uses Rollup under the hood to produce highly optimized bundles.

With over 80,000 GitHub stars, Vite has become the de facto build tool for modern frontend development, replacing webpack in many projects and serving as the default for frameworks like Vue, Nuxt, SvelteKit, and SolidStart.

## What Vite Does
Vite solves the slow feedback loop in frontend development. Traditional bundlers like webpack must process your entire dependency graph before serving any page. Vite splits the work into two categories:
- **Dependencies** — pre-bundled once using esbuild (10-100x faster than JS bundlers)
- **Source code** — served on demand as native ESM, transformed only when requested

This means your dev server starts in milliseconds regardless of project size, and Hot Module Replacement (HMR) stays fast as the project grows.

## Architecture Overview
```
[Source Files] --> [Vite Dev Server]
                      |
           +----------+----------+
           |                     |
    [Dependencies]         [App Source]
    Pre-bundled via        Served as native
    esbuild (once)         ES modules (on-demand)
           |                     |
           +----------+----------+
                      |
              [Browser ESM Import]

[Production Build]
    Source --> Rollup --> Optimized Chunks
```

## Self-Hosting & Configuration
```bash
# Install Vite in an existing project
npm install -D vite

# vite.config.ts — example configuration
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
  }
})
```

## Key Features
- **Instant Dev Server** — starts in under 100ms using native ESM
- **Lightning Fast HMR** — module-level hot replacement that stays fast at scale
- **Framework Agnostic** — first-class support for React, Vue, Svelte, Preact, Lit, and more
- **Optimized Builds** — Rollup-based production bundling with tree-shaking and code splitting
- **Rich Plugin Ecosystem** — compatible with Rollup plugins plus Vite-specific plugin API
- **Built-in TypeScript** — zero-config TS support via esbuild transpilation
- **CSS Handling** — PostCSS, CSS Modules, Sass, Less, and Stylus out of the box
- **SSR Support** — experimental server-side rendering primitives

## Comparison with Similar Tools
| Feature | Vite | webpack | Parcel | esbuild | Turbopack |
|---|---|---|---|---|---|
| Dev Server Speed | Instant (ESM) | Slow (bundle-first) | Moderate | Very Fast | Very Fast |
| HMR Performance | Excellent | Moderate | Good | Limited | Excellent |
| Production Bundler | Rollup | webpack | Parcel | esbuild | webpack |
| Config Complexity | Minimal | Complex | Zero-config | Minimal | Minimal |
| Plugin Ecosystem | Rich | Very Rich | Moderate | Growing | Early |
| Framework Support | All Major | All Major | All Major | Limited | React-focused |
| GitHub Stars | 80K | 66K | 44K | 38K | Part of Next.js |

## FAQ
**Q: Can I migrate from webpack to Vite?**
A: Yes. Most webpack projects can be migrated by replacing webpack config with vite.config.ts and updating import paths. The community provides migration guides and compatibility plugins.

**Q: Does Vite work with legacy browsers?**
A: Yes, via @vitejs/plugin-legacy which uses Babel to transpile and polyfill for older browsers in production builds.

**Q: Why does Vite use Rollup for production instead of esbuild?**
A: Rollup offers more mature code-splitting, tree-shaking, and plugin support needed for production optimization. Vite 6 plans to explore using Rolldown (Rust-based Rollup) for even faster builds.

**Q: Is Vite suitable for large enterprise projects?**
A: Absolutely. Companies like GitLab, Shopify, and Google use Vite. Its architecture scales well because dev server speed is independent of project size.

## Sources
- GitHub: https://github.com/vitejs/vite
- Documentation: https://vite.dev
- Created by Evan You (Vue.js creator)
- License: MIT

---
Source: https://tokrepo.com/en/workflows/e893b7be-366b-11f1-9bc6-00163e2b0d79
Author: Script Depot