DOCSEARCHbyAlgolia
Submit Docs

Vite Documentation

website·Indexed 32 days ago

https://vite-docs.ru

A fast build tool for modern web development. This documentation covers project scaffolding, production builds, and server-side rendering (SSR). It includes detailed guides on the Plugin API, JavaScript API, and the experimental Environment API, as well as configuration options for the development server and build process. Recent updates include Vite 6.0, 8.0, and the integration of Rolldown for improved build performance.

Tokens
100.6K
Snippets
508
Records
787
Agent score
62%

What's inside Vite

  1. Overview of Vite Client-Side HMR API

    Vite provides a client-side HMR interface via the import.meta.hot object. This API is primarily intended for framework and tool developers. To ensure that HMR code is removed from production builds, all calls to the HMR API must be wrapped in a conditional check for import.meta.hot.
    if (import.meta.hot) {
  // HMR code
}

  2. Overview of Vite 6.0

    Vite 6.0 is a major update that focuses on ecosystem collaboration and providing a more polished development foundation. It introduces new APIs and continues to expand its integration with various web frameworks and tools.

  3. Overview of Vite build tool

    Vite is a modern web build tool designed for speed and developer experience. It consists of two primary components: a development server that provides fast Hot Module Replacement (HMR) by leveraging native ES modules, and a production build command that uses Rolldown to generate highly optimized static assets.

  4. Overview of Vite 8.0 and the transition to Rolldown

    Vite 8.0 introduces a major architectural change by replacing the dual-bundler system (esbuild for development and Rollup for production) with Rolldown. Rolldown is a unified Rust-based bundler that provides 10–30x faster build speeds compared to Rollup while maintaining compatibility with existing Vite and Rollup plugin APIs. This unification eliminates inconsistencies between development and production transformation pipelines and enables advanced features like full-build mode, persistent module-level caching, and Module Federation support.

  5. Overview of Vite 6 Environment API

    Vite 6 introduces a formalized Environment API that allows developers and framework authors to define multiple execution environments beyond the implicit client and ssr environments found in Vite 5. This enables applications to run in diverse environments (such as Node.js, Cloudflare workerd, or edge servers) while maintaining a consistent configuration and plugin pipeline. In development mode, a single Vite dev server can now manage multiple independent development environments, each tailored to match its corresponding production runtime.

  6. Overview of Vite Plugin Architecture

    Vite plugins extend the Rolldown plugin interface with additional Vite-specific options. This architecture allows a single plugin to function across both development and production build phases. Developers are encouraged to review the Rolldown plugin documentation before implementing Vite-specific logic.

  7. Overview of Vite 2.0 Core Architecture

    Vite 2.0 is a frontend build tool that combines a pre-configured development server with a fast bundler. It leverages native browser ES-module support and native-code tools like esbuild for speed. The core is framework-agnostic; all framework-specific support (e.g., Vue, React, Preact, Lit Element) is handled via plugins.

  8. Overview of Vite Client-side HMR API

    Vite provides a client-side HMR interface via the import.meta.hot object. This API is primarily intended for framework and tool developers. To ensure that HMR code is removed during production builds, all calls to the HMR API must be wrapped in a conditional check.
    if (import.meta.hot) {
  // HMR code
}

  9. Implement Static Site Generation (SSG) with Vite

    Static Site Generation (SSG) or pre-rendering can be achieved by using the production SSR logic to render known routes into static HTML files at build time instead of on-demand at request time.

  10. Understand Vite's development server architecture

    Vite optimizes development speed by splitting the build process into two distinct strategies:

    1. Dependencies: Libraries that change infrequently are pre-bundled once using fast native tools (like esbuild) to ensure they are ready instantly.
    2. Source Code: Application code is delivered on-demand using native ES Modules (ESM). The browser requests only the files needed for the current page, and Vite transforms them on the fly.

    This approach eliminates the need to bundle the entire application before starting the server, resulting in near-instant startup times regardless of project size. It also enables efficient Hot Module Replacement (HMR) by updating only the modified module without a full page reload.

  11. Vite Core Features Overview

    Vite is a high-performance frontend build tool designed for the next generation of web applications. Key technical capabilities include:

    • Instant Server Start: Uses native ESM for file delivery and fast dependency pre-bundling.
    • Lightning Fast HMR: Hot Module Replacement applies changes instantly upon saving, regardless of application size.
    • Out-of-the-box Support: Built-in support for TypeScript, JSX, CSS, Web Workers, and WebAssembly.
    • Optimized Build: Utilizes Rolldown for advanced tree-shaking, built-in minification, and granular chunk splitting control.
    • Extensibility: Features a flexible plugin system that extends the Rollup plugin interface and provides fully typed APIs.
    • SSR Support: Simplified configuration for custom Server-Side Rendering (SSR) setups or frameworks.

  12. Use Hot Module Replacement (HMR) in Vite

    Vite provides an HMR API on top of native ESM, allowing frameworks to provide instant updates without a full page reload or loss of application state.

    Official or community integrations are available for:

    • Vue Single File Components
    • React Fast Refresh
    • Preact (via @prefresh/vite)

    If you use create-vite templates, these integrations are pre-configured.