在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

vitejs/vite

菜单

Vite 简介

相关源文件

目的与范围

本文档全面介绍了 Vite，涵盖其核心架构、基本概念和设计理念。它为理解 Vite 如何作为下一代前端构建工具和开发服务器奠定了基础。

有关特定子系统的详细信息，请参阅核心架构、插件系统、配置系统、开发服务器和构建过程。

什么是 Vite

Vite (法语意为“快速”，发音为/vit/) 是一款现代前端构建工具，通过两大核心能力显著提升开发体验：

  1. 开发服务器：通过原生 ES 模块提供源代码，实现即时服务器启动和闪电般快速的热模块更换 (HMR)
  2. 构建系统：使用 Rollup 打包代码，并提供预配置的生产优化

Vite 通过在开发过程中利用原生 ES 模块，消除了在提供代码之前进行打包的需求，从而区别于传统的打包工具。这种方法提供了近乎即时的服务器启动和模块更新。

来源：packages/vite/package.json7 README.md27-31

核心架构概述

Vite 的架构围绕模块化设计构建，并在开发和生产工作流程之间进行清晰划分。

核心系统映射

主要入口点映射到特定的代码实体

系统组件代码实体文件位置
createServer()主要的开发服务器函数packages/vite/src/node/server/index.ts
build()主要的构建函数packages/vite/src/node/build.ts
resolveConfig()配置解析器packages/vite/src/node/config.ts
插件容器PluginContainer 类packages/vite/src/node/server/pluginContainer.ts

来源：packages/vite/package.json19-20 packages/vite/package.json21-32

关键系统和组件

配置系统

Vite 使用灵活的配置系统，以 vite.config.js 文件为中心

插件架构

Vite 的插件系统扩展了 Rollup 的插件 API，并增加了 Vite 特定的钩子

来源：packages/vite/package.json83-153

开发模式与生产模式

Vite 在开发与生产中的运行方式根本不同

开发模式

  • 原生 ESM：直接提供模块，无需打包
  • 按需转换：仅在请求时转换文件
  • 快速 HMR：更新特定模块，无需完全重新加载页面
  • 依赖预打包：使用 esbuild 优化依赖

生产模式

  • Rollup 打包：为生产创建优化后的包
  • 资源优化：处理和优化静态资源
  • 代码分割：自动分割代码以实现最佳加载
  • 摇树优化：移除未使用的代码

来源：README.md29-31 packages/vite/package.json84 packages/vite/package.json88

项目脚手架生态系统

Vite 包含 create-vite，用于快速初始化项目

集成点

Vite 通过其插件生态系统与各种工具和框架集成

集成类型示例插件包
框架React, Vue, Svelte@vitejs/plugin-react, @vitejs/plugin-vue
CSS 预处理器Sass, Less, Stylus内置支持
旧版支持IE11, 旧版浏览器@vitejs/plugin-legacy
后端集成Express, KoaManifest 生成

来源：packages/plugin-legacy/package.json1-4 packages/vite/package.json155-167 packages/vite/package.json94-153

设计理念

Vite 的设计优先考虑

  1. 开发者体验：快速启动、即时更新、清晰的错误消息
  2. 现代标准：原生 ESM，最新的 JavaScript 功能
  3. 灵活的架构：可扩展的插件系统，框架无关的核心
  4. 生产优化：利用 Rollup 和 esbuild 等成熟工具
  5. 逐步采用：可与现有项目和构建设置配合使用

架构通过分离开发速度（原生 ESM）和生产优化（打包）之间的关注点，同时在两种模式下保持一致的插件 API，体现了这些原则。

来源：README.md16-35 packages/vite/package.json7 packages/vite/LICENSE.md1-25