Vite: Fast Frontend Build Tool and Dev Server

What Vite is

Vite (French for "quick", pronounced like "veet") is an MIT-licensed frontend build tool written in TypeScript. Its README describes it as next generation frontend tooling that aims to provide a faster and leaner development experience for modern web projects. It has two major parts: a dev server that adds rich feature enhancements on top of native ES modules, including very fast Hot Module Replacement (HMR), and a build command that bundles code with Rolldown and is pre-configured to output optimized static assets for production.

The problem it was created for is spelled out in the project's "Why Vite" guide: as web applications grew, developers on large projects suffered slow dev server startups, sluggish hot updates and long production builds. Traditional bundlers processed the whole application upfront before anything appeared in the browser, so the bigger the app, the longer the wait. Vite rethought how code is served during development instead of incrementally tuning that approach.

It is aimed at anyone building a modern web front end. The official scaffolding ships templates for vanilla JavaScript, Vue, React, Preact, Lit, Svelte, Solid and Qwik, each with a TypeScript variant. The docs also list frameworks that chose Vite as their foundation, among them Nuxt, SvelteKit, Astro, React Router, Analog and SolidStart, plus tools such as Vitest and Storybook that build on it, and backend frameworks like Laravel and Ruby on Rails that integrate it into their asset pipelines.

How it works

Vite splits a project into two kinds of code and treats them differently during development:

• Dependencies, the libraries in node_modules that rarely change, are pre-bundled once with Rolldown. Pre-bundling converts CommonJS and UMD packages to ESM so they can be served natively, and collapses packages made of many internal modules into one. The docs use lodash-es as the example: it has over 600 internal modules, which would otherwise mean 600+ browser requests for a single import. Bare imports such as import { someMethod } from 'my-dep' are rewritten to URLs like /node_modules/.vite/deps/my-dep.js?v=f3sf2ebd, and dependency requests are strongly cached through HTTP headers.
• Source code, your application files, is served on demand over native ESM. The browser requests only the modules the current page needs and Vite transforms each file as it is requested. When you edit a file, HMR updates just that module without a full page reload.

The entry point is index.html, which sits at the project root rather than inside a public folder. Vite treats it as source code and part of the module graph: it resolves <script type="module"> tags and stylesheet links, rebases URLs automatically, and supports multiple HTML entry points for multi-page apps. It can also resolve dependencies outside the root, which makes it workable in monorepos.

For production, Vite still bundles, because shipping unbundled ESM costs extra network round trips from nested imports. Historically Vite used esbuild in development and Rollup for production builds; the "Why Vite" guide explains that maintaining two pipelines caused inconsistent transforms and separate plugin systems. Rolldown, a Rust bundler compatible with the same plugin API, now unifies both, with Oxc handling parsing, transforming and minifying. CSS is minified with Lightning CSS by default. During development Vite sets esnext as the transform target; production builds default to Baseline Widely Available browsers as of a date fixed for each major (2026-01-01 for the current major, which the docs map to browsers released around mid-2023).

Key features

• TypeScript and JSX out of the box: .ts, .tsx and .jsx are transpiled with the Oxc Transformer; the docs say HMR updates can reflect in the browser in under 50ms.
• HMR API: frameworks hook into it for precise updates that keep application state; first-party integrations exist for Vue single-file components and React Fast Refresh, and Preact is covered by @prefresh/vite.
• CSS handling: @import inlining via postcss-import, automatic url() rebasing, automatic PostCSS config loading, CSS Modules for files ending in .module.css, and built-in support for .scss, .sass, .less, .styl and .stylus once the preprocessor itself is installed.
• Assets and modules: static asset imports return resolved URLs, plus JSON imports, glob imports, dynamic imports, WebAssembly and Web Workers.
• Build optimizations: automatic CSS code splitting per async chunk, <link rel="modulepreload"> generation, and async chunk loading that fetches shared chunks in parallel instead of in a waterfall; an experimental chunk import map improves cache hit rates.
• Licence report: the build.license option writes .vite/license.md listing the licences of bundled dependencies.
• Content Security Policy support: html.cspNonce adds a nonce to generated script, style and preload tags.
• Extensibility: a plugin API based on Rollup conventions that works in both dev and build, a JavaScript API, full typing, and an Environment API that lets frameworks define targets beyond client and SSR, such as edge runtimes or service workers.

Getting started

Vite requires Node.js 20.19+ or 22.12+ (some templates need newer versions). To scaffold a project interactively:

$ npm create vite@latest

Or pick the project name and template on the command line, for example Vue:

# npm 7+, extra double-dash is needed:
$ npm create vite@latest my-vue-app -- --template vue

Yarn, pnpm, Bun and Deno equivalents are documented (yarn create vite, pnpm create vite, bun create vite, deno init --npm vite). To add Vite to an existing project manually, install the CLI:

$ npm install -D vite

Create an index.html containing <p>Hello Vite!</p>, then run:

$ npx vite

The page is served on http://localhost:5173. A scaffolded project ships with these npm scripts:

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}

To try it without installing anything, vite.new/{template} opens a Vite setup on StackBlitz in the browser.

Use cases

• Single-page apps in React, Vue, Svelte, Solid, Preact, Lit or Qwik, where fast startup and HMR matter more as the codebase grows.
• Meta-framework foundations: if you use Nuxt, SvelteKit, Astro, React Router or SolidStart, Vite is already the build layer underneath, so its config and plugins carry over.
• Backend-rendered apps that need a modern asset pipeline, such as Laravel or Rails projects using their Vite integrations.
• Testing and component work through tools built on Vite, such as Vitest and Storybook, sharing one transform pipeline with the app.
• Multi-page sites and monorepos, using multiple HTML entry points and out-of-root dependency resolution.
• Tooling authors writing plugins or embedding Vite through its typed JavaScript API.

How it compares

Vite's own docs frame the comparison against bundle-based dev servers, where the entire application is bundled before it can be served; Vite's ESM-based server serves modules on demand instead. They also credit predecessors: Snowpack pioneered unbundled development and inspired dependency pre-bundling, WMR from the Preact team inspired the universal plugin API, and @web/dev-server influenced the original server architecture.

Inside its own history, the main shift is from the esbuild-plus-Rollup pair to Rolldown and Oxc, which the team says gives one consistent pipeline from development to production. The docs also flag a trade-off they are working on: very large codebases can see slow page loads in dev from the sheer number of unbundled requests, and a "full bundle mode" for the dev server is being explored. Teams coming from a bundle-first setup should expect the dev and build paths to behave alike now, but should still test production builds rather than relying on the dev server alone.

Things to know before adopting

• No type checking: Vite only transpiles TypeScript. The docs recommend running tsc --noEmit alongside the build, and tsc --noEmit --watch or vite-plugin-checker during development.
• Browser targets: development assumes a modern browser. For older browsers in production, lower the build target or use the official @vitejs/plugin-legacy.
• vite preview is not a production server; it is for previewing a build locally. Deploy the static output to a real host.
• Release policy: semantic versioning with no fixed cycle. Patches ship as needed (usually weekly), minors go through a beta (usually every two months), and majors generally follow the Node.js EOL schedule. The current minor gets regular fixes, the previous major and previous minor get important fixes and security patches, the second-to-last ones get security patches only, and anything older is unsupported.
• Semver edge cases: TypeScript definitions may change incompatibly between minors, and experimental features may change between minors, so the docs suggest locking the minor version if you depend on either.
• Dependency cache: pre-bundled dependencies are strongly cached, so locally editing a package in node_modules needs the cache-busting steps in the pre-bundling guide.
• Licence: MIT, with no copyleft obligations for apps built with it.

Project activity

As of October 2026 the repository has about 83,600 stars and 8,900 forks. It was created in April 2020, is written in TypeScript and is MIT-licensed. The monorepo publishes three packages: vite, @vitejs/plugin-legacy and create-vite; the latest vite release at the time of writing is v8.3.5 (October 21, 2026), and create-vite 9.3.3 shipped on October 27, 2026. The team runs vite-ecosystem-ci to test major downstream projects against every Vite change before release. Source is at github.com/vitejs/vite and documentation at vite.dev.