Vite
Vite is a fast JavaScript build tool and development server that uses native ES modules for near-instant startup and hot module replacement during development, then bundles the app for production using Rollup.
Definition
Vite is a fast JavaScript build tool and development server that uses native ES modules for near-instant startup and hot module replacement during development, then bundles the app for production using Rollup.
Overview
Older JavaScript bundlers like Webpack typically need to bundle an entire application's module graph before the dev server can serve even a single page, which gets progressively slower as a project grows. Vite, created by Evan You (also the creator of Vue.js), takes a different approach during development: it serves source files directly to the browser as native ES modules, transforming and compiling only the specific files a given page actually imports, so dev server startup time stays roughly constant regardless of overall project size. When a file changes, Vite's hot module replacement (HMR) only needs to re-process that one module and push the update to the browser, rather than rebundling large portions of the dependency graph, which is what makes its development feedback loop feel close to instantaneous compared to older bundler-based dev servers. For production builds, where the native ES module approach isn't practical for shipping to all browsers efficiently, Vite switches strategies and bundles the application using Rollup, applying tree-shaking and code-splitting for optimized output. Because it's framework-agnostic at its core, Vite has become the default or recommended build tool for many modern frontend projects, including React apps, Vue.js applications, and frameworks like SvelteKit that are built directly on top of it, and it integrates naturally with TypeScript out of the box.
Key Features
- Near-instant dev server startup via native ES module serving
- Fast hot module replacement that updates only the changed module
- Production builds bundled and optimized with Rollup
- Built-in TypeScript, JSX, and CSS preprocessing support
- Framework-agnostic — used as the default tooling for many React, Vue, and Svelte projects
- Rich plugin ecosystem compatible with much of the Rollup plugin API
- Optimized dependency pre-bundling for faster cold starts