| Product | Vite |
| Website | vite.dev |
| Category | Build Tool / Dev Server |
| By | Evan You (creator of Vue.js) |
| License | MIT |
What Is Vite?
Vite (French for “fast”) is a build tool that provides an instant dev server and optimized production builds. In development, Vite serves source files over native ESM — the browser imports modules directly, so there’s no bundling step. The dev server starts in milliseconds regardless of project size. For production, Vite uses Rollup to produce optimized bundles.
The insight behind Vite is that modern browsers support ES modules natively. In development, you don’t need to bundle — just serve the source files and let the browser handle imports. Vite transforms files on demand (TypeScript, JSX, CSS) using esbuild, which is 10-100x faster than Babel. The result is a dev server that starts instantly and updates in milliseconds.
Key Features
Instant Dev Server
Vite starts in milliseconds. It doesn’t bundle your application in development — it serves source files over native ESM and transforms them on demand. Whether your project has 10 files or 10,000, the startup time is the same.
Lightning Fast HMR
Hot Module Replacement updates are near-instant. When you save a file, Vite invalidates only that module and its immediate dependents. The update reaches the browser in single-digit milliseconds, regardless of application size.
Framework Agnostic
Vite works with React, Vue, Svelte, Solid, Preact, Lit, and vanilla JS/TS. First-party templates get you started in one command. The plugin API is based on Rollup’s, so the Rollup plugin ecosystem works with Vite.
Optimized Production Builds
Vite uses Rollup for production builds: code splitting, tree shaking, CSS code splitting, and asset optimization. The production output is well-optimized and battle-tested (Rollup has been the standard library bundler for years).
Who Is This For?
- Any new frontend project (Vite is the default choice)
- Teams migrating from Webpack or Create React App
- Library authors (Vite’s library mode uses Rollup)
- Anyone frustrated with slow dev servers
Pros
- Instant dev server startup
- Near-instant HMR updates
- Framework agnostic (React, Vue, Svelte, etc.)
- Simple configuration
- Rollup plugin compatibility
- Optimized production builds
Cons
- Dev/prod behavior can differ (ESM vs bundle)
- Rollup-based builds are slower than esbuild
- Less plugin ecosystem than Webpack
- No Module Federation equivalent
- Some Webpack-specific features missing
Verdict
Vite is the default build tool for new frontend projects. The instant dev server and near-instant HMR fundamentally change the development experience. Once you’ve used a dev server that starts in milliseconds, waiting 30 seconds for Webpack feels like going back in time.
The framework support is excellent (React, Vue, Svelte, Solid all work great), the configuration is simpler than Webpack, and Rollup’s production builds are reliable. The ecosystem has moved: Next.js, Nuxt, SvelteKit, Remix, and Astro all use or support Vite. If you’re starting a new project, start with Vite.