Vite

Vite (French for "quick," pronounced veet) is a front-end build tool created by Evan You, the author of Vue. It provides a development server that starts almost instantly and updates the browser in milliseconds, plus an optimized production build. It's the default tooling for Vue, Svelte/SvelteKit, SolidJS, Astro, Qwik, and many React setups, and the React team recommends it for projects that don't use a full framework.

Vite's speed comes from a simple idea: during development, don't bundle. Modern browsers understand ES modules natively, so Vite serves source files on demand and only transforms what the browser actually requests. For production, it bundles and optimizes with Rollup (and increasingly Rolldown, a Rust-based Rollup-compatible bundler).

TL;DR

Quick Example

Create a project and run it:

A typical configuration with an alias, an API proxy for local development, and manual vendor chunking:

Environment variables in .env files:

Core Concepts

Why the Dev Server Is Fast

Traditional bundlers build the entire dependency graph before serving anything, so startup grows with app size. Vite starts a server immediately and transforms each file when the browser requests it. Route-level code that isn't visited is never processed. Source files are transformed with esbuild or SWC (for TypeScript and JSX), which is extremely fast.

Dependency Pre-Bundling

Packages in node_modules often ship CommonJS or hundreds of small internal modules. On first start, Vite uses esbuild to convert dependencies to ESM and combine them into a few files, caching the result in node_modules/.vite. This avoids hundreds of browser requests for a library like lodash-es.

Hot Module Replacement

When you save a file, Vite sends the updated module over a WebSocket and the framework plugin swaps it in, often preserving component state. Because Vite works at the module level, HMR speed stays constant as the app grows.

Production Builds

Production still bundles because many small requests are slower over real networks, and bundling enables tree shaking and better caching.

Plugins

Vite plugins extend the Rollup plugin interface with dev-server hooks. Official plugins cover React (@vitejs/plugin-react or the SWC variant), Vue, and legacy browser support. The community ecosystem includes PWA generation, SVG components, image optimization, and bundle visualization.

Environment Variables and Modes

.env, .env.local, .env.[mode], and .env.[mode].local are loaded by mode (development, production, or custom). Only VITE_-prefixed variables are exposed to client code, and they're embedded at build time — anything in client code is public.

Beyond SPAs

Best Practices

Keep Secrets Out of VITE_ Variables

Anything prefixed VITE_ ships to the browser. Keep API keys and credentials on the server.

Lazy-Load Routes and Heavy Components

Use dynamic import() or framework lazy loading so large features become separate chunks.

Analyze the Bundle

Use rollup-plugin-visualizer to see what's in each chunk and remove accidental heavy imports.

Use vite preview Before Deploying

The dev server and production build differ; preview catches issues like broken dynamic imports or missing environment variables.

Configure the Base Path for Subdirectory Deploys

Set base: "/my-app/" when the app isn't served from the domain root, or asset URLs will break.

Pin Plugin Versions and Upgrade Together

Major Vite versions occasionally change plugin APIs; upgrade Vite and its plugins together and read the migration guide.

Common Mistakes

Using process.env in Client Code

Vite uses import.meta.env. process.env is undefined in the browser unless explicitly defined.

Expecting Type Errors to Stop the Dev Server

Vite transpiles TypeScript without type checking. Run tsc --noEmit in CI or use vite-plugin-checker.

CommonJS-Only Dependencies Misbehaving

Some older packages need optimizeDeps.include or a CJS interop setting to work correctly.

Stale Pre-Bundle Cache

After changing linked packages or patching node_modules, restart with vite --force to rebuild the dependency cache.

Assuming Dev Performance Equals Production Performance

Dev serves unbundled modules; measure real performance on the production build.

Comparison

FAQ

What is Vite used for?

Vite is a build tool and development server for front-end projects. It gives fast startup and hot updates in development and produces optimized bundles for production.

Why is Vite faster than webpack?

In development, Vite serves native ES modules and only transforms files as the browser requests them, while webpack bundles the whole app up front. Vite also uses fast native tools like esbuild for transforms and dependency pre-bundling.

Does Vite work with React?

Yes. Use the react-ts template or add @vitejs/plugin-react to an existing project. Vite is a common choice for React single-page apps that don't need a full framework like Next.js.

How do I migrate from Create React App to Vite?

Install Vite and the React plugin, move index.html to the project root with a <script type="module" src="/src/main.tsx"> tag, rename REACT_APP_ variables to VITE_, replace process.env with import.meta.env, and update scripts. Test the build and any SVG or asset imports.

Is Vite only for Vue?

No. It started in the Vue ecosystem but supports React, Svelte, Solid, Preact, Lit, vanilla JavaScript, and more.

Related Topics

References