What is Vite?

What is Vite?

Vite is a frontend build tool created by Evan You, the creator of Vue.js. In development it serves your source files to the browser over native ES modules, so the dev server starts quickly and changes appear through hot module replacement. For production it bundles your code with Rolldown into optimised static files that any web server or CDN can host.

The current major is Vite 8, released on 12 March 2026. Older tutorials describe Vite 7 and earlier, which used esbuild in development and Rollup for production builds. That difference matters when you read an old guide or plugin readme.

How Vite works

Development: native ES modules

Vite serves source code on demand over native ESM, so the browser only loads what the current page imports. Startup stays fast as the project grows because nothing has to be bundled first. Libraries in node_modules are pre-bundled once, for two reasons from the Vite docs: CommonJS and UMD packages must be converted to ESM, and a package with many internal modules becomes a single request instead of hundreds. In Vite 8 that pre-bundling is done with Rolldown.

Production: one bundle pipeline

Unbundled ESM is still slow in production because nested imports cause extra network round trips, so vite build bundles, splits code and hashes file names. Rolldown is a Rust bundler built by the VoidZero team to replace both esbuild and Rollup, so development and production share one pipeline. The Vite 8 announcement claims builds up to 10-30x faster and quotes users such as Linear, whose production build went from 46 s to 6 s. These are vendor-reported figures for their own projects, so measure your own build.

What works without extra setup

• TypeScript and JSX. Vite transpiles .ts files with the Oxc transformer but does not type-check. Run tsc --noEmit in CI.
• CSS. Plain CSS, CSS modules (any file ending in .module.css) and PostCSS.
• Glob imports. import.meta.glob imports many modules by pattern, lazy-loaded by default.
• Web workers. The recommended form is new Worker(new URL(...)).
• Environment variables. Read through import.meta.env from .env files.
• Official templates for vanilla JavaScript, Vue, React, Preact, Lit, Svelte, Solid and Qwik, each with a TypeScript variant.

Targets: Vite 8 requires Node.js 20.19+ or 22.12+. Production output targets browsers classed as Baseline Widely Available as of a date fixed for each major (roughly mid-2023 for this one). Older browsers need @vitejs/plugin-legacy.

Example: an API URL that reaches the browser

You add VITE_API_URL=https://api.example.com to .env.production and read it as import.meta.env.VITE_API_URL. Vite replaces it with the literal value at build time. A variable without the VITE_ prefix, such as DB_PASSWORD, stays out of client code and is undefined in the browser. The flip side is that anything with the prefix is visible to every visitor, so never put a secret in a VITE_ variable.

Common mistakes

• Using process.env. In browser code Vite uses import.meta.env. Migrated code needs its references updated.
• Putting secrets in VITE_ variables. They end up in the public bundle.
• Trusting the dev server as a preview of production. Development serves unbundled modules, production serves bundles. Run vite build and vite preview before judging performance.
• Expecting type errors to break the build. They do not unless you add a type-check step.
• Ignoring bundle size. A fast build says nothing about how much JavaScript the visitor downloads. Split routes and lazy load what is not needed at first paint.
• Running an unsupported Node version, which fails at install or start.

Vite and webpack

webpack bundles the whole application before it can serve it in development. Vite serves modules on request and bundles only for production, which is why large projects start faster. webpack keeps a bigger and older plugin ecosystem, and some webpack-specific features have no direct Vite equivalent, so check your plugins before migrating. Vite's plugin API is built on Rollup's, and Vite 8 keeps compatibility with existing plugins through a compatibility layer.

Server-side rendering

Vite has built-in support for server-side rendering, but its guide calls the API low-level and meant for library and framework authors. Most teams use a framework that wraps it instead of wiring it by hand. For a client-rendered app, see single page applications for the trade-offs.

Vite, performance testing and monitoring

Vite shortens your build and feedback loop. It does not decide how fast the finished site feels. Test the production build: page speed monitoring from LoadFocus runs scheduled Lighthouse audits and Core Web Vitals checks from 25 cloud regions, so you can see whether a bundle change helped real pages. A Vite-built single page app also calls APIs, and those are the part that breaks under traffic. API monitoring watches the endpoints your app depends on, and a load test shows how the backend behaves with many concurrent users. Two guides go deeper: load testing single page applications and JavaScript performance. The official Vite guide covers configuration.

FAQ: Vite

Is Vite a bundler?

It is a build tool that includes a dev server and a production build. The bundling itself is done by Rolldown in Vite 8 (Rollup in Vite 7 and earlier).

Does Vite check TypeScript types?

No. Vite only transpiles TypeScript. Run tsc --noEmit, or your framework's type-check command, in CI or as a separate dev process.

Which Node.js version does Vite need?

Vite 8 requires Node.js 20.19+ or 22.12+. Some templates may ask for a newer version.

Does Vite work with React and Vue?

Yes. The official templates cover React, Vue, Preact, Svelte, Solid, Lit and Qwik, and Vite provides an HMR API that framework plugins use for updates without a full reload.

How do I read environment variables in Vite?

Through import.meta.env. Only variables prefixed with VITE_ reach client code, and you must restart the dev server after changing .env files.