Vite (web)

Definition

Vite is a fast front-end build tool and development server that serves source code over native ES modules during development and bundles the app for production using Rollup.

Overview

Vite was created to solve the slow startup and rebuild times that grew common as JavaScript applications scaled and older bundlers had to process an entire dependency graph before serving a single page. During development, Vite instead serves files over native browser ES modules, transforming only the files a browser actually requests, which makes both cold start and hot module replacement dramatically faster than bundling everything upfront. For production builds, Vite switches strategy and uses Rollup under the hood to produce a highly optimized, tree-shaken bundle, giving developers fast iteration during development and an efficient, production-ready output for deployment. Its dependency pre-bundling step (historically powered by esbuild) converts CommonJS packages to ES modules and combines many small modules into fewer requests, further speeding up the dev server. Vite has become a default choice for new React, Vue, and Svelte projects thanks to its plugin ecosystem and framework-agnostic core, and it underlies many popular meta-frameworks. It's commonly contrasted with newer, even lower-level tools like Turbopack, and with the Next.js toolchain, which uses its own bundling pipeline rather than Vite.

Key Features

• Native ES module-based dev server with near-instant cold starts
• Extremely fast hot module replacement (HMR) during development
• Rollup-powered production bundling with tree-shaking and code splitting
• Dependency pre-bundling for faster page loads during development
• Framework-agnostic core with official templates for React, Vue, Svelte, and more
• Rich plugin ecosystem, largely compatible with Rollup plugins
• Built-in support for TypeScript, JSX, CSS Modules, and PostCSS

Use Cases

Frequently Asked Questions

Related in Web