How it works
During development Vite serves your source files to the browser as native ES modules and transforms each one only when it is requested, so even large projects start quickly, and hot module replacement updates the page without losing its state. For production it bundles, minifies and splits the code into small files. Vite 8 replaced its two engines (esbuild and Rollup) with Rolldown, a single bundler written in Rust.
Vite works with React, Vue, Svelte, Solid, Preact and plain TypeScript, and it sits underneath many frameworks, including Nuxt, SvelteKit, Astro and React Router. Since Create React App was deprecated, it is the usual way to start a plain React single-page app. Vitest, a test runner built on it, reuses the same configuration.
Vite pros and cons
Pros
- Dev server starts quickly and updates the page on every save
- Little configuration, with sensible defaults for TypeScript, JSX and CSS
- Works with most frameworks, and many frameworks are built on it
- Large plugin ecosystem, compatible with Rollup plugins
Cons
- Only a build tool: no routing, server rendering or data loading on its own
- Development and production builds can still differ in rare edge cases
When to use Vite
Pick it when
- Single-page apps and dashboards in React, Vue or Svelte
- Replacing Create React App or an old webpack setup
- Libraries and widgets that need a quick build setup
Skip it when
- Many public pages need server rendering for SEO (use a framework built on it)
Vite pricing
Vite vs the alternatives
Related terms
More in Frontend
Build tools