DOCSEARCHbyAlgolia
Submit Docs

Vite

repository·main·Indexed 12 days ago

https://github.com/vitejs/vite

A high-performance frontend build tool that provides an instant development server using native ES modules and an optimized production build process powered by Rolldown. It includes a scaffolding tool, create-vite, with official template presets for Vue 3, React, Svelte, Solid, and Qwik.

Tokens
130.7K
Snippets
503
Records
658
Agent score
99%

What's inside Vite

  1. What is Vite?

    main

    Vite is a next-generation frontend build tool designed for a faster and leaner development experience. It is composed of two primary components:

    1. Dev Server: A development server that leverages native ES modules to provide rich feature enhancements, such as extremely fast Hot Module Replacement (HMR).
    2. Build Command: A production build command that bundles code using Rolldown, outputting highly optimized static assets.

    Vite is highly extensible through a Plugin API and a JavaScript API, both of which feature full TypeScript support.

  2. Overview of Vite

    main

    Vite is a next-generation frontend build tool designed for a faster and leaner development experience. It is composed of two primary components:

    1. Dev Server: Provides rich feature enhancements over native ES modules, enabling extremely fast Hot Module Replacement (HMR).
    2. Build Command: Bundles code using Rolldown, pre-configured to output highly optimized static assets for production.

    Vite is highly extensible through its Plugin API and JavaScript API, both of which feature full TypeScript support.

  3. Understand the React + Vite template options

    main

    The React + Vite template provides a minimal setup with Hot Module Replacement (HMR) and Oxlint rules. You can choose between two official plugin implementations depending on your preference for the underlying compiler:

    • @vitejs/plugin-react: Uses Oxc for transformations.
    • @vitejs/plugin-react-swc: Uses SWC for transformations.

  4. Understand React + TypeScript + Vite template options

    main

    This template provides a minimal setup for React with TypeScript, featuring Hot Module Replacement (HMR) and Oxlint rules. When choosing a plugin for your React project, you have two official options:

    • @vitejs/plugin-react: Uses Oxc for transformations.
    • @vitejs/plugin-react-swc: Uses SWC for transformations.

  5. Explore Official Vite Plugins

    main

    Vite provides several official plugins to support common web development patterns like Vue, React, and legacy browser support. Before installing a third-party plugin, check the Features Guide to see if Vite already supports your requirement out-of-the-box.

    Official Plugins include:

    • Vue Support:
      • @vitejs/plugin-vue: Enables Vue 3 Single File Components (SFC) support.
      • @vitejs/plugin-vue-jsx: Enables Vue 3 JSX support via a dedicated Babel transform.
    • React Support:
      • @vitejs/plugin-react: Provides React Fast Refresh support using the Oxc Transformer.
      • @vitejs/plugin-react-swc: Uses SWC for development. For large projects requiring custom plugins, this can significantly improve cold start and Hot Module Replacement (HMR) speeds if the plugin is compatible with SWC. During production builds, it uses SWC + Oxc Transformer.
      • @vitejs/plugin-rsc: Supports React Server Components (RSC) by utilizing the Environment API to provide low-level primitives for React frameworks.
    • Legacy Support:
      • @vitejs/plugin-legacy: Adds support for legacy browsers in production builds.

  6. Improve startup time with server.warmup

    main

    Vite 5 introduces the server.warmup configuration option to improve dev server startup performance. This feature allows you to define a list of modules that should be pre-transformed as soon as the server starts.

    Additionally, if you use the --open flag or server.open configuration, Vite will automatically warm up the entry point of your application or the provided URL.

  7. Use HTML as the application entry point

    main

    In Vite, HTML files serve as the primary entry points for your application. Any HTML file located in your project root is directly accessible via its directory path.

    Assets referenced within these HTML files using specific attributes (like <script type="module" src> or <link href>) are automatically processed and bundled by Vite.

    To prevent Vite from processing a specific element (useful for external CDNs), add the vite-ignore attribute to that element.

    <!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" />
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

  8. Avoid performance bottlenecks caused by barrel files

    main

    Barrel files (files that re-export multiple APIs from a directory, e.g., export * from './file.js') can slow down page loads. When you import a single item from a barrel file, Vite may fetch and transform every file exported by that barrel, including those with side-effects.

    Best Practice: Instead of importing from the barrel file: import { slash } from './utils'

    Import the specific API directly: import { slash } from './utils/slash.js'

    // Avoid this (Barrel file: src/utils/index.js)
export * from './color.js'
export * from './dom.js'
export * from './slash.js'

// Instead of:
import { slash } from './utils'

// Use direct imports:
import { slash } from './utils/slash.js'

  9. Svelte + Vite vs. SvelteKit

    main

    Choose between this template and SvelteKit based on your routing and deployment needs:

    • Use this template if you want to bring your own routing solution and prefer a framework that uses Vite as a build tool rather than a full-stack application framework.
    • Use SvelteKit if you need an official framework with a serverless-first approach, built-in support for TypeScript, SCSS, and Less, and easy integration for mdsvex, GraphQL, PostCSS, and Tailwind CSS.

  11. Backward compatibility and deprecations in Vite 6

    main

    Vite 6 maintains backward compatibility with Vite 5 to ensure a smooth transition:

    • Server API: server.moduleGraph and server.ssrLoadModule remain functional. server.moduleGraph returns a mixed view of client and SSR module nodes.
    • SSR Configuration: The top-level ssr property is still supported but is deprecated. It should be replaced by the environments.ssr configuration.
    • Implicit Environments: The client environment is always present in both dev and build. The ssr environment is present in dev by default, but in build, it is only present if explicitly configured via environments.ssr or the deprecated build.ssr.

  12. Understand Vite's Plugin System and API

    main

    Vite 2.0 uses a plugin system inspired by WMR that extends the Rollup plugin interface. This makes Vite compatible with many existing Rollup plugins out of the box.

    Key characteristics:

    • Rollup Compatibility: Plugins can use standard Rollup-compatible hooks.
    • Vite-specific Hooks: Vite provides additional hooks and properties to control Vite-only behaviors, such as differentiating between development and build modes or implementing custom Hot Module Replacement (HMR) logic.
    • Programmatic API: An improved programmatic API allows developers to build higher-level tools or frameworks on top of Vite.