This document provides a high-level overview of Vite, its architectural philosophy, and the main systems that comprise the codebase. Vite is a build tool that provides both a development server and a production build system for modern web applications. This introduction covers the project's structure, core design principles, and the main subsystems developers will encounter when working with or contributing to Vite.
For detailed information about specific systems, refer to:
Vite (French for "quick", pronounced /viːt/) is a native ESM-powered web development build tool packages/vite/package.json4 that consists of two major parts:
The tool aims to provide an extremely fast development experience by leveraging native browser ES module support during development, while producing highly optimized bundles for production using a Rust-based bundler. packages/vite/package.json7 README.md27-31
Sources: README.md23-42 packages/vite/package.json1-12 packages/vite/package.json4-7
Vite 8 represents a significant architectural evolution by integrating Rolldown and Oxc as core primitives for both development and production. packages/vite/package.json75 docs/guide/migration.md16-18
This diagram maps high-level functional areas to specific code entities and classes found in the packages/vite source.
Sources: packages/vite/package.json25-27 packages/vite/package.json44-50 packages/vite/package.json75 packages/vite/CHANGELOG.md5-12
Vite employs a dual-mode architecture where development and production builds follow different strategies:
Vite 8 introduces a Bundled Dev mode (experimental) that utilizes Rolldown's DevEngine for a full-bundle development experience, providing an alternative to the standard ESM-based dev server. packages/vite/CHANGELOG.md5-12
Sources: packages/vite/package.json1-77 pnpm-lock.yaml9-11 packages/vite/CHANGELOG.md1-40 README.md34-40
Vite is organized as a pnpm monorepo with core logic and official plugins residing in the packages/ directory. package.json94 README.md44-51
This diagram shows how the workspace packages interact and their specific roles.
Sources: package.json1-42 packages/create-vite/package.json1-15 packages/plugin-legacy/package.json1-16
| Package | Location | Purpose | Version |
|---|---|---|---|
vite | packages/vite/ | Core build tool and dev server. packages/vite/package.json2-4 | 8.2.0 |
create-vite | packages/create-vite/ | CLI for scaffolding new projects. packages/create-vite/package.json2-9 | 9.1.2 |
@vitejs/plugin-legacy | packages/plugin-legacy/ | Legacy browser compatibility via SystemJS. packages/plugin-legacy/package.json2-14 | 8.2.2 |
Sources: package.json1-42 packages/vite/package.json1-3 packages/create-vite/package.json3 packages/plugin-legacy/package.json3
Vite configuration is resolved via resolveConfig. Vite 8 introduces the configLoader option, allowing users to choose between bundle (using Rolldown) and native (using Node.js native runtime for TS/ESM). docs/config/index.md27-29
The ViteDevServer (created via createServer) orchestrates the dev experience. It handles on-demand transformation and maintains the EnvironmentModuleGraph. In Vite 8, the Oxc Transformer is used for high-speed TS/JSX transpilation. docs/guide/features.md45-46
The build command uses production-specific logic to run builds. In Vite 8, this is powered by Rolldown (~1.2.1), replacing Rollup for bundling and esbuild for minification. packages/vite/package.json75 docs/guide/migration.md16-18
Vite uses a Universal Plugin Interface compatible with Rolldown. The PluginContainer handles hook execution. Plugins can now use the applyToEnvironment filter to target specific execution contexts. docs/guide/api-plugin.md (Note: based on architectural intent).
Vite's HMR is "lightning fast" because it only invalidates the affected module. Vite 8 adds support for client-side HMR within the bundled-dev mode via Rolldown's DevEngine. packages/vite/CHANGELOG.md37
Sources: packages/vite/package.json1-77 packages/vite/CHANGELOG.md1-40 README.md23-41
Vite 8 leverages a modern Rust-based stack for maximum performance.
| Dependency | Version | Purpose |
|---|---|---|
rolldown | ~1.2.1 | Rust-based bundler for builds, dep optimization, and bundled-dev. packages/vite/package.json75 |
lightningcss | ^1.33.0 | High-performance CSS transformer and minifier. packages/vite/package.json72 |
postcss | ^8.5.25 | CSS processing and plugin support. packages/vite/package.json74 |
oxc-minify | ^0.142.0 | Rust-based tool for JS/TS minification (used in docs/legacy). docs/package.json144 |
Sources: packages/vite/package.json71-77 pnpm-lock.yaml9-11
Vite requires Node.js ^20.19.0 or >=22.12.0. packages/vite/package.json191-193 package.json5-7
The vite package provides multiple entry points for different consumers:
bin/vite.js packages/vite/package.json25-27dist/node/index.js (Main export) packages/vite/package.json45dist/node/module-runner.js (For SSR execution) packages/vite/package.json49dist/node/internal.js (For internal/advanced usage) packages/vite/package.json50Sources: packages/vite/package.json44-57
To explore the codebase further, refer to these specific sections:
Sources: Wiki Table of Contents
Refresh this wiki