Vite — Explained with Examples

Vite is a next-generation build tool using native ES modules for a fast dev server with HMR and Rollup for optimized production builds.

Vite (French for “quick”) leverages native ES modules in the browser during development, serving modules on demand without bundling. This gives instant server start and lightning-fast Hot Module Replacement (HMR). For production, Vite uses Rollup for tree-shaken, optimized bundles. It supports TypeScript, JSX, CSS preprocessors, and Vue/React out of the box.

Think of Vite like a buffet versus a pre-plated meal. Webpack serves a pre-plated meal — everything is cooked and arranged before you see it. Vite’s dev server is a buffet — you grab only what you want when you want it. For takeout (production build), it packs everything efficiently.

Vite’s configuration is intentionally simpler than Webpack’s. Most plugins are installed and used with minimal config. Scaffolding a new project takes seconds.

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

# Dev server (instant start)
npm run dev

# Production build
npm run build
# Output in dist/ directory

Vite supports SSR, library mode, and multi-page apps. Its plugin system is compatible with Rollup plugins, giving access to a vast ecosystem.

Webpack, esbuild, Bundling, Tree Shaking

esbuild Details