DOCSEARCHbyAlgolia
Submit Docs

Vite Documentation

website·Indexed 43 days ago

https://cn.vitejs.dev/

A fast build tool for modern web applications. This documentation covers core concepts, configuration options for development servers and builds, plugin API, SSR, and detailed migration guides from v1 through v7, including the latest updates in Vite 8.1.

Tokens
57K
Snippets
306
Records
480
Agent score
71%

What's inside Vite

  1. Overview of Vite Environment API for Frameworks

    The Environment API is currently in Release Candidate (RC) status. It allows frameworks to write runtime-agnostic code by providing standardized communication levels between the Vite server and the application code. While stable between major versions, some specific APIs may still be experimental.

  2. Overview of Vite 6 Environments API

    Vite 6 introduces a formal 'Environment' concept, moving beyond the implicit client and ssr environments of Vite 5. This allows developers and framework authors to define any number of environments based on where the application runs in production (e.g., browser, Node.js server, Edge workers). In development, a single Vite server can now run code across multiple different environments simultaneously, each with its own configuration and runtime, while sharing the same HTTP server and plugin pipeline.

  3. Overview of Vite 6 Experimental Environment API

    Vite 6 introduces a new Environment API designed primarily for framework authors and Vite plugin maintainers. This API allows for a more flexible development experience that closer mimics production environments and enables the sharing of new building blocks across the ecosystem. For standard SPA users, the single client environment continues to work as before. Custom SSR applications remain backward compatible.

  4. Overview of Vite Client-side HMR API

    Vite exposes a manual HMR API via the import.meta.hot object. This API is primarily intended for framework and tool authors. Because HMR code should not run in production, all HMR API calls must be wrapped in a conditional guard to allow for tree-shaking.
    if (import.meta.hot) {
  // HMR code
}

  5. Vite Plugin API and Rollup Compatibility

    Vite's plugin system is based on the Rollup plugin API, meaning many Rollup plugins are directly compatible with Vite. In addition to Rollup hooks, Vite provides specific APIs to handle development-only needs, such as distinguishing between development and production environments or implementing custom Hot Module Replacement (HMR) logic.

  6. Understand the ViteFetchResult interface

    The ViteFetchResult interface provides information about a module to be executed by the Vite runner. It includes the source code (typically wrapped in an async function), the disk file path (which resolves import.meta.url or filename), the module ID in the server's module graph, and the request URL. The invalidate property is used to signal the module runner to invalidate the module instead of serving it from cache, which is typically set to true during HMR updates.
    export interface ViteFetchResult {
  /**
   * Code to be evaluated by the Vite runner.
   * By default, the code is wrapped in an async function.
   */
  code: string
  /**
   * File path of the module on disk.
   * This path is resolved as import.meta.url/filename.
   * For virtual modules, this value is `null`.
   */
  file: string | null
  /**
   * ID of the module in the server module graph.
   */
  id: string
  /**
   * Module URL used during import.
   */
  url: string
  /**
   * Invalidate the module on the client.
   */
  invalidate: boolean
}

  7. Understand Vite's plugin architecture and Rolldown compatibility

    Vite uses Rolldown internally, which includes its own set of built-in plugins. Vite plugins are an extension of the Rollup plugin interface, meaning many Rollup plugins are compatible with Vite.

  8. Understand Vite's core architecture and extensibility

    Vite maintains a lean core package to ensure long-term maintainability while supporting common Web application patterns out-of-the-box. It provides powerful primitives and APIs that allow developers to extend functionality via a plugin system. The Vite plugin system is a superset of the Rollup plugin API, and its bundler, Rolldown, maintains compatibility with Rollup plugin interfaces, allowing plugins to often work across both Vite and native Rollup projects.

  9. Vite Core Features Overview

    Vite is a high-performance frontend build tool designed for next-generation web applications. Its core capabilities include:

    • Fast Server Start: Uses native ESM for on-demand source code loading and fast dependency pre-bundling.
    • Lightning Fast HMR: Provides immediate response to changes regardless of application size.
    • Out-of-the-box Support: Supports TypeScript, JSX, CSS, Workers, and WebAssembly via plugins.
    • Build Optimization: Features tree-shaking (powered by Rolldown), built-in compression, and fine-grained chunk control.
    • Extensibility: Offers a flexible plugin system based on Rollup's interface and a fully typed API.
    • SSR Support: Simplifies the creation of custom Server-Side Rendering (SSR) setups or frameworks.

  10. Leverage Vite as a foundation for building frameworks

    Vite is designed to be framework-agnostic and is highly suitable for creating other application frameworks. It provides a JavaScript API that allows framework authors to customize the user experience. Additionally, Vite includes built-in support for SSR (Server-Side Rendering) primitives, which are essential for modern Web frameworks. It also integrates well with backend frameworks such as Ruby and Laravel.

  11. Vite 8 Architectural Overview: Rolldown Integration

    Vite 8 has replaced the dual-bundler approach (esbuild for development and Rollup for production) with Rolldown, a single unified Rust-based bundler. This change aims to provide 10-30x faster build speeds while maintaining compatibility with the Rollup and Vite plugin APIs. This unification eliminates inconsistencies between development and production pipelines and enables advanced features like full bundling mode, flexible chunk splitting, and module-level persistent caching.

  12. Understand Vite's release cycle and versioning

    Vite follows Semantic Versioning (semver). The release cadence is as follows:

    • Patch versions: Released as needed (typically weekly).
    • Minor versions: Include new features and are released as needed, always preceded by a beta pre-release phase (typically every two months).
    • Major versions: Usually aligned with the Node.js End-of-Life (EOL) schedule and announced in advance. These undergo extensive ecosystem discussion and include alpha and beta pre-release phases (typically annually).