Vite 介绍

什么是 Vite？

Vite（法语意为"快速的"，发音 /viːt/，类似"veet"）是新一代前端构建工具，专注于为现代 Web 项目提供极速的开发体验。它的名字恰如其分地体现了核心理念：让前端开发更快、更简洁。

Vite 由两个核心部分组成：

开发服务器：基于原生 ES 模块，提供即时启动和极快的热模块替换（HMR）
构建命令：使用 Rolldown 进行生产打包，输出高度优化的静态资源

传统构建工具的困境

在理解 Vite 的创新之处前，我们需要了解传统打包工具面临的问题。以 Webpack 为代表的打包器采用"先打包后服务"的模式：启动时，它们需要遍历整个应用的依赖图，将所有模块打包成 bundle，然后才能启动开发服务器。

为什么需要打包？

你可能会问，为什么传统工具要先打包？这与浏览器的历史发展有关。在 ES 模块成为标准之前，浏览器没有原生的模块系统。JavaScript 只能通过 <script> 标签加载，而大量小文件会导致：

每个 HTTP 请求都有开销（建立连接、发送请求、等待响应）
浏览器对同一域名的并发请求数有限制（通常是 6 个）
代码之间的依赖关系需要手动管理（比如使用 RequireJS 或 Browserify）

打包工具的出现解决了这些问题：它将所有模块合并为少数几个文件，减少了网络请求，同时自动处理依赖关系。

打包模式的代价

这种模式在小型项目中问题不大，但随着项目规模增长：

冷启动慢：大型项目的启动可能需要几十秒甚至数分钟，开发者只能盯着进度条等待。这是因为打包器需要完整遍历整个依赖图，即使你只修改了一个文件，启动时也要处理所有文件。
热更新慢：每次修改代码，打包器需要重新分析依赖关系、重新打包受影响的模块，即使在 HMR 模式下也可能需要数秒。更新的粒度是 chunk 级别，而不是模块级别。
构建速度慢：生产环境的打包过程耗时漫长，严重影响持续集成的效率。大型项目可能需要 5-10 分钟甚至更长。

这些问题的根源在于：打包器在启动时做了太多不必要的工作。当你只修改了一个组件时，为什么要重新处理整个应用的依赖？这就像你只想读一本书的一页，但图书馆要求你必须先把整个书架的书都翻一遍。

Vite 的解决方案

Vite 采用完全不同的策略：开发时不打包，按需编译。

利用浏览器原生 ESM

现代浏览器已经原生支持 ES 模块（ESM），这意味着浏览器可以自己处理模块之间的依赖关系。Vite 充分利用了这一特性：

即时启动：Vite 启动时只需要加载一个 HTML 文件和入口模块，其他模块按需加载，冷启动几乎是瞬时的
按需编译：只有当浏览器请求某个模块时，Vite 才会编译它。你修改了哪个文件，就只重新编译那个文件
精确 HMR：模块更新是精确到文件级别的，更新速度不受项目大小影响

传统打包工具：
  启动 → 扫描所有文件 → 构建依赖图 → 打包所有模块 → 启动服务器
  （可能需要数分钟）

Vite：
  启动 → 直接启动服务器 → 浏览器请求模块 → 按需编译返回
  （几乎即时）

依赖预构建

虽然 Vite 不打包你的源代码，但它会对第三方依赖进行预构建。这是必要的优化步骤：

兼容性需求：npm 生态中有大量包仍然以 CommonJS 或 UMD 格式发布，而 Vite 的开发服务器只服务 ESM。预构建会将这些依赖转换为 ESM 格式，让你可以无缝使用 npm 生态。

性能优化：某些包（如 lodash-es）包含数百个内部模块。如果不预构建，浏览器会发起数百个 HTTP 请求。Vite 将它们合并为单个模块，大幅减少请求数量。

预构建使用 esbuild，这是一个用 Go 编写的高性能打包器，比传统 JavaScript 打包器快 10-100 倍。预构建结果会被缓存，只在依赖变化时重新执行。

生产环境打包

虽然开发时不打包，但生产环境仍然需要打包。原因如下：

代码分割：将代码拆分为多个 chunk，实现按需加载
Tree-shaking：移除未使用的代码，减小包体积
压缩优化：压缩代码、优化资源，提升加载性能

Vite 使用 Rolldown 进行生产构建。Rolldown 是用 Rust 编写的高性能打包器，是 Rollup 的 Rust 移植版本，继承了 Rollup 的优秀设计和灵活的插件 API，同时提供了更好的性能。

Vite 8 统一打包器架构

Vite 8 采用 Rolldown 作为单一统一的打包器，这是自 Vite 2 以来最重要的架构变化。在此之前，Vite 采用双打包器架构：esbuild 负责开发环境的快速编译，Rollup 负责生产环境的打包优化。

双打包器架构虽然服务了 Vite 多年，但也带来了一些问题：两套转换管道意味着两套插件系统，需要大量胶水代码保持同步，模块处理的不一致问题随时间积累。

Rolldown 的设计目标是解决这些问题：

极致性能：Rolldown 用 Rust 编写，运行速度接近原生。在基准测试中，它的速度比 Rollup 快 10-30 倍，与 esbuild 的性能水平相当。

完全兼容：Rolldown 支持与 Rollup 和 Vite 相同的插件 API。大多数现有的 Vite 插件在 Vite 8 中开箱即用。

高级特性：统一的打包器解锁了双打包器架构难以实现的功能，包括完整的打包模式、更灵活的代码分割、模块级持久缓存和 Module Federation 支持。

Vite 8 工具链

Vite 8 构建了一个端到端的工具链，各组件紧密协作：

Rolldown：统一的打包器，负责依赖预构建和生产打包
Oxc：编译器工具链，用于 JavaScript 解析、转换和压缩
Lightning CSS：CSS 处理和压缩

这套工具链带来了显著的性能提升。实际案例显示：

Linear：生产构建时间从 46 秒降至 6 秒
Ramp：构建时间减少 57%
Mercedes-Benz.io：构建时间减少最多 38%
Beehiiv：构建时间减少 64%

Vite 背后的团队

Vite 由 VoidZero 团队主导开发，与 Bolt 和 NuxtLabs 合作。VoidZero 是一家专注于 JavaScript 工具链的公司，致力于打造更快、更统一的开发体验。

Vite 的成功离不开开源社区的贡献。截至目前，Vite Core 已有超过 1200 位贡献者，每周下载量达到 6500 万次。Vite 的生态系统也在持续增长，插件和框架的支持日益丰富。

为了帮助开发者更好地导航日益增长的插件生态，Vite 团队推出了 registry.vite.dev，这是一个可搜索的插件目录，每日从 npm 收集 Vite、Rolldown 和 Rollup 的插件数据。

感谢 Rollup 和 esbuild

在 Vite 迁移到 Rolldown 之际，我们需要向这两个项目表达深深的感谢，正是它们让 Vite 成为可能。

Rollup 从一开始就是 Vite 的生产环境打包器。它优雅的插件 API 设计如此完善，以至于 Rolldown 直接采用了它作为自己的 API 标准。Vite 整个插件生态的存在都建立在 Rollup 奠定的基础之上。感谢 Rich Harris 创建了 Rollup，感谢 Lukas Taegert-Atkinson 和 Rollup 团队的维护和演进。

esbuild 从早期就为 Vite 提供了极快的开发体验：依赖预构建、TypeScript 和 JSX 转换在毫秒内完成，而不是数百毫秒。esbuild 证明了构建工具可以快上几个数量级，它的速度树立了标准，启发了整整一代 Rust 和 Go 语言工具的出现。感谢 Evan Wallace 向我们展示了什么是可能的。

没有这两个项目，Vite 不会是今天的样子。即使我们向前迈进，Rollup 和 esbuild 的影响已深深嵌入 Vite 的 DNA 中。

Vite 8 的新特性

除了 Rolldown 统一打包器外，Vite 8 还包含以下重要特性：

统一打包器架构

Rolldown 的设计目标是解决这些问题：

极致性能：Rolldown 用 Rust 编写，运行速度接近原生。在基准测试中，它的速度比 Rollup 快 10-30 倍，与 esbuild 的性能水平相当。

完全兼容：Rolldown 支持与 Rollup 和 Vite 相同的插件 API。大多数现有的 Vite 插件在 Vite 8 中开箱即用。

高级特性：统一的打包器解锁了双打包器架构难以实现的功能，包括完整的打包模式、更灵活的代码分割、模块级持久缓存和 Module Federation 支持。

集成 Devtools

Vite 8 内置了开发者工具选项，可通过配置启用：

export default defineConfig({
  devtools: true,
})

Devtools 提供了调试和分析 Vite 项目的深度洞察，直接在开发服务器中访问，包括：

模块依赖关系可视化
构建性能分析
配置检查
插件执行追踪

浏览器控制台转发

Vite 8 可以将浏览器控制台日志和错误转发到开发服务器终端。这在处理编码代理时特别有用，因为运行时客户端错误在 CLI 输出中可见：

export default defineConfig({
  server: {
    forwardConsole: true,
  },
})

当检测到编码代理时，此功能会自动激活。

Wasm SSR 支持

.wasm?init 导入现在在 SSR 环境中原生可用，扩展了 Vite 的 WebAssembly 功能到服务端渲染场景。之前需要手动处理 URL 和文件读取，现在可以直接使用：

// Vite 8: SSR 环境中直接使用
import init from './example.wasm?init'

export async function render() {
  const instance = await init()
  return instance.exports.main()
}

@vitejs/plugin-react v6

随 Vite 8 一起发布，React 插件 v6 使用 Oxc 进行 React Refresh 转换。Babel 不再是依赖项，安装体积更小。对于需要 React Compiler 的项目，v6 提供了 reactCompilerPreset 辅助函数。

TypeScript paths 自动解析

Vite 8 提供内置的 TypeScript 路径别名解析支持：

export default defineConfig({
  resolve: {
    tsconfigPaths: true,
  },
})

启用后，Vite 会自动读取 tsconfig.json 中的 paths 配置，无需手动在 resolve.alias 中重复配置。

Vite 的核心特性

极速的开发体验

Vite 的性能优势体现在整个开发流程中：

操作	Vite	传统打包器
冷启动	秒级（几乎即时）	分钟级（需要打包整个应用）
热更新	毫秒级（精确到模块）	秒级（需要重新打包）
构建时间	快速（Rolldown + 并行处理）	较慢（JavaScript 工具链）

这种性能差异的根源在于架构设计的根本不同。传统打包器采用"全量预处理"模式，而 Vite 采用"按需处理"模式。想象一下餐厅的点餐流程：

传统打包器：顾客进门后，餐厅先把菜单上所有菜品都做一遍，然后再问顾客想吃什么。这就是为什么大型项目启动需要等待很久——即使你只需要修改一个组件，打包器也要处理整个应用的所有文件。
Vite：顾客点一道菜，厨房才做一道菜。按需处理，即时响应。这就是 Vite 的核心理念——只在需要时才处理文件。

Vite 在开发环境使用 Oxc 处理 TypeScript 和 JSX。Oxc 是用 Rust 编写的高性能工具链，其速度比 Babel 快 20-100 倍，比 esbuild 也更快。

开箱即用的配置

Vite 采用"约定优于配置"的理念，减少配置负担：

TypeScript：原生支持，无需配置即可使用 .ts 文件
JSX：支持 .jsx 和 .tsx 文件，自动检测 React、Vue、Preact 等框架
CSS 预处理器：内置 Sass、Less、Stylus 支持，安装对应依赖即可使用
CSS Modules：以 .module.css 结尾的文件自动启用 CSS Modules
JSON 导入：支持导入 JSON 文件，并支持具名导入实现 tree-shaking

智能依赖处理

Vite 的依赖处理机制经过精心设计：

自动发现：扫描源代码，自动发现需要预构建的依赖
智能缓存：缓存预构建结果，只在 package-lock.json 变化时重新构建
按需优化：小型的 ESM 依赖可以跳过预构建，直接使用浏览器加载

丰富的插件生态

Vite 的插件系统兼容 Rollup 插件，这意味着：

可以使用大量现有的 Rollup 插件
官方维护的框架插件质量有保证
社区活跃，新功能不断涌现

常用插件包括：

@vitejs/plugin-vue：Vue 3 单文件组件支持
@vitejs/plugin-react：React Fast Refresh
@vitejs/plugin-legacy：支持旧版浏览器
vite-plugin-pwa：PWA 支持

浏览器支持

开发环境

Vite 假设使用现代浏览器进行开发，目标是 esnext，让代码尽可能接近源码。Vite 会注入一些运行时代码来支持开发服务器的功能，这些代码使用了当前主版本发布时 Baseline Newly Available 的特性（Vite 6 对应 2026-01-01）。

生产环境

默认针对 Baseline Widely Available 浏览器（至少 2.5 年前发布的浏览器）：

浏览器	最低版本
Chrome	111+
Edge	111+
Firefox	114+
Safari	16.4+

这些浏览器版本对应 Baseline Widely Available 特性集。可以通过 build.target 配置调整目标版本，最低支持 es2015。如需支持更老的浏览器，可以使用 @vitejs/plugin-legacy 插件。

重要提示：即使设置了更低的目标，Vite 仍需要以下最低浏览器支持，因为它依赖于原生 ESM 动态导入和 import.meta：

浏览器	最低版本
Chrome	64+
Firefox	67+
Safari	11.1+
Edge	79+

注意：Vite 默认只处理语法转换，不包含 polyfill。如果需要 polyfill，可以参考 cdnjs.cloudflare.com/polyfill，它会根据用户的浏览器 UserAgent 自动生成 polyfill 包。

旧浏览器支持

使用官方的 @vitejs/plugin-legacy 插件可以支持旧浏览器。该插件会自动生成兼容旧浏览器的代码块和相应的 ES 语言特性 polyfill，这些兼容代码只在不支持原生 ESM 的浏览器中加载。

Vite 与其他工具对比

理解 Vite 与其他构建工具的区别，有助于你做出正确的技术选型。

Vite vs Webpack

Webpack 是最成熟的打包工具，拥有丰富的功能和插件生态。

特性	Vite	Webpack
开发启动	极快（不打包）	较慢（需要打包）
HMR 速度	极快（模块级）	较慢（chunk 级）
配置复杂度	简单（开箱即用）	复杂（需要大量配置）
生态成熟度	快速发展中	非常成熟
定制能力	良好	极强

选择 Vite：新项目、追求开发体验、使用现代技术栈 选择 Webpack：需要特定的 Webpack 插件、复杂的企业级需求

Vite vs Turbopack

Turbopack 是 Vercel 开发的新一代打包工具，使用 Rust 编写，专为 Next.js 优化。

特性	Vite	Turbopack
框架支持	框架无关，支持 Vue/React/Svelte 等	主要支持 Next.js
开发模式	原生 ESM + 预构建	增量打包
成熟度	稳定，广泛使用	发展中，逐步稳定
社区生态	丰富，插件众多	较小，Next.js 生态
生产构建	Rolldown（Rollup 兼容）	Turbopack

选择 Vite：非 Next.js 项目、需要框架灵活性、稳定可靠的工具 选择 Turbopack：使用 Next.js 且需要极致开发性能

Vite vs Parcel

Parcel 以零配置著称，与 Vite 有相似的"开箱即用"理念。

特性	Vite	Parcel
开发模式	原生 ESM	开发时打包
启动速度	更快	快
社区规模	更大	较小

选择 Vite：需要更好的生态支持、插件丰富度 选择 Parcel：追求极致的零配置体验

何时选择 Vite？

Vite 适合以下场景：

新项目：Vite 的零配置特性让你可以快速启动项目，无需花费时间在构建配置上。官方模板支持 Vue、React、Svelte、Preact、Lit、Solid、Qwik 等主流框架。

大型项目：当项目规模增长时，传统打包器的启动和热更新会越来越慢。Vite 的性能不受项目大小影响，适合长期维护的大型项目。

现代浏览器环境：如果不需要支持 IE 等旧版浏览器，Vite 是理想的选择。它充分利用现代浏览器的能力，提供最佳的开发体验。

框架开发：Vue、React、Svelte 等框架的官方模板都基于 Vite，框架作者也在积极支持 Vite。

需要谨慎考虑的场景：

必须支持 IE11：虽然可以使用 @vitejs/plugin-legacy，但会增加复杂性
深度依赖 Webpack 特定插件：某些 Webpack 插件可能没有 Vite 替代品
CommonJS 依赖较多：虽然预构建可以处理，但可能会有边缘情况

学习路径

本教程按照由浅入深的顺序组织，帮助你全面掌握 Vite：

基础阶段：

环境配置与项目创建
配置文件详解
依赖预构建原理

核心功能：

模块热替换（HMR）
TypeScript 支持
CSS 处理
静态资源管理
WebAssembly 支持
Web Workers

进阶配置：

环境变量与模式
生产构建优化
插件系统

高级特性：

服务端渲染（SSR）
库模式开发
插件开发
CSP 安全配置

迁移与速查：

Vite 8 迁移指南
知识速查表

写在最后

Vite 通过利用浏览器原生 ES 模块能力，在开发环境实现了极速体验，同时通过 Rolldown 保证了生产构建的质量。它的出现改变了前端构建工具的格局。

选择 Vite 你将获得：更快的开发迭代、更少的配置负担、更好的开发体验，以及活跃的社区支持。

接下来让我们从环境配置开始，正式进入 Vite 的世界。

什么是 Vite？​

传统构建工具的困境​

为什么需要打包？​

打包模式的代价​

Vite 的解决方案​

利用浏览器原生 ESM​

依赖预构建​

生产环境打包​

Vite 8 统一打包器架构​

Vite 8 工具链​

Vite 背后的团队​

感谢 Rollup 和 esbuild​

Vite 8 的新特性​

统一打包器架构​

集成 Devtools​

浏览器控制台转发​

Wasm SSR 支持​

@vitejs/plugin-react v6​

TypeScript paths 自动解析​

Vite 的核心特性​

极速的开发体验​

开箱即用的配置​

智能依赖处理​

丰富的插件生态​

浏览器支持​

开发环境​

生产环境​

旧浏览器支持​

Vite 与其他工具对比​

Vite vs Webpack​

Vite vs Turbopack​

Vite vs Parcel​

何时选择 Vite？​

学习路径​

写在最后​