DOCSEARCHbyAlgolia
Submit Docs

Vite Build Tool

website·Indexed 43 days ago

https://vite.dev/guide/

A fast build tool for modern web applications. Vite provides a development server with Hot Module Replacement (HMR), dependency pre-bundling, and a production build process. It features a robust Plugin API, support for TypeScript, CSS handling, and Server-Side Rendering (SSR). The documentation covers configuration options for server, build, and preview modes, as well as migration guides from v7 and the Environment API.

Tokens
47.9K
Snippets
266
Records
381
Agent score
76%

What's inside Vite

  1. Overview of Vite Client HMR API

    Vite exposes a manual HMR API via the import.meta.hot object. This API is primarily intended for framework and tooling authors. For handling HMR updates within Vite plugins, use the handleHotUpdate hook instead.

  2. Overview of Vite

    Vite is a modern web build tool consisting of two main components: a development server that leverages native ES modules for fast Hot Module Replacement (HMR), and a production build command that uses Rolldown to output optimized static assets. It is highly extensible via a Plugin API and JavaScript API.

  3. Overview of Vite Plugin Architecture

    Vite plugins extend the Rolldown plugin interface, allowing a single plugin to work for both development and build processes. Plugins are typically authored as factory functions that return a plugin object, enabling users to pass customization options.

  4. Unified toolchain with Rolldown

    Vite is transitioning from a dual-tooling approach (esbuild for development and Rollup for production) to a unified toolchain powered by Rolldown. Rolldown is a Rust-based bundler that provides native speed while maintaining compatibility with the existing Rollup plugin API. It utilizes Oxc for parsing, transforming, and minifying, ensuring a consistent pipeline from development to production.

  5. Handle HTML entry points and asset processing

    HTML files in the project root serve as application entry points and are accessible via their directory path (e.g., <root>/about.html maps to /about.html). Vite automatically processes assets referenced in HTML elements like <script type="module" src>, <link href>, and <img>. To prevent Vite from processing a specific element, add the vite-ignore attribute.
    <!doctype html>
<html>
  <head>
    <link rel="icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/src/styles.css" />
  </head>
  <body>
    <img src="/src/images/logo.svg" alt="logo" />
    <!-- This script is processed by Vite -->
    <script type="module" src="/src/main.js"></script>
    <!-- This element is ignored by Vite -->
    <img vite-ignore src="https://cdn.example.com/image.png" />
  </body>
</html>

  6. Understand Vite's release cycle and versioning

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

    • Patch releases: Released as needed (typically weekly) for bug fixes.
    • Minor releases: Contain new features and are released as needed, typically every two months, following a beta pre-release phase.
    • Major releases: Generally align with the Node.js EOL schedule (typically annually). These involve extensive ecosystem discussion and include both alpha and beta pre-release phases.

  7. Understand Vite's npm dependency resolving and pre-bundling

    Native ES imports in the browser do not support bare module imports (e.g., import { someMethod } from 'my-dep'). Vite solves this by detecting bare imports and performing two steps:

    1. Pre-bundling dependencies using Rolldown to convert CommonJS/UMD modules to ESM and improve page load speed.
    2. Rewriting imports to valid URLs (e.g., /node_modules/.vite/deps/my-dep.js?v=...) so the browser can resolve them.

    Note: Dependencies are strongly cached via HTTP headers. If you are editing a dependency locally, you may need to clear the browser cache.

  8. Understand Vite's Lean Extendable Core and Plugin System

    Vite maintains a lean core by providing strong primitives and APIs that allow plugins to handle diverse use cases. The plugin system is based on a superset of the Rollup plugin API. Because Vite's bundler, Rolldown, maintains compatibility with Rollup's plugin interface, plugins can often be used interchangeably between Vite and plain Rollup projects.

  9. Reference of built-in Vite HMR events

    Vite automatically dispatches the following HMR events:

    • vite:beforeUpdate: An update is about to be applied.
    • vite:afterUpdate: An update has just been applied.
    • vite:beforeFullReload: A full page reload is about to occur.
    • vite:beforePrune: Modules no longer needed are about to be pruned.
    • vite:invalidate: A module was invalidated via hot.invalidate().
    • vite:error: An error occurred (e.g., syntax error).
    • vite:ws:disconnect: WebSocket connection lost.
    • vite:ws:connect: WebSocket connection established.

  10. Understand Vite's plugin architecture and compatibility

    Vite plugins are an extension of the Rollup plugin interface. Additionally, Vite uses Rolldown under the hood, which provides its own set of builtin plugins for common use cases.

  11. Use Hot Module Replacement (HMR) in Vite

    Vite provides an HMR API over native ESM, allowing frameworks to update the application instantly without a full page reload or loss of state. First-party integrations are available for Vue Single File Components and React Fast Refresh. Official integration for Preact is available via @prefresh/vite. These are pre-configured when using templates from create-vite.

  12. Vite Performance Architecture and Tooling

    Vite achieves high performance and fast HMR (Hot Module Replacement) at scale by combining JavaScript flexibility with native tools. It utilizes the Oxc toolchain and the Rolldown bundler for intensive tasks, while using JavaScript for the remaining logic. Framework plugins may utilize Babel for compiling user code when necessary.