Vite

定义

Vite 是一个用于现代 Web 项目的前端构建工具，目标是提供比传统打包工具更快、更精简的开发体验。它由两个主要部分构成：一是开发服务器，在浏览器原生支持的 ES 模块之上提供模块热替换等功能；二是一套构建指令，把源码打包为可供生产环境部署的静态资源^[2]。

名称取自法语单词，意为“快速”，读音接近“veet”。它属于开发阶段的工具链环节，不构成页面运行时的框架，本身与具体 UI 框架解耦，框架相关能力通过插件提供^[2]。

原理

传统打包工具在启动开发服务器之前，需要先把整个应用的所有模块打包成 bundle；Vite 反其道而行，启动时只创建一个用于承载资源服务的服务器，等浏览器按 ES 模块规范发起请求时再按需编译并返回被请求的模块。省去打包这一步的过程通常称为“无打包”开发，其前提是现代浏览器已普遍原生支持 ES 模块。

由于浏览器无法直接解析指向 node_modules 的裸模块名，Vite 会重写模块导入路径，并提供依赖预构建：用 esbuild 把第三方依赖打包并缓存为单个 ES 模块，以压缩请求数量，同时让 CommonJS 与 UMD 形式的依赖也能在浏览器中使用。已请求过的模块会被设置强缓存，模块变化时通过附加版本查询参数使其失效。

模块热替换在此基础上工作。开发服务器监听文件改动，浏览器端通过 WebSocket 收到通知后，只重新请求发生变化的那一个模块，而非重载整个应用并丢失页面状态^[1]。因此热更新的耗时不会随模块总量线性增长^[3]。

生产构建另走一条路径。Vite 预先配置好打包流程，输出时执行 CSS 代码分割、注入预加载指令、优化异步块加载，用户无需手动配置。插件 API 以 Rollup 插件接口为基础扩展，同一套插件在开发与构建两个阶段都能使用。

发展历程

Vite 于 2020 年作为实验性质的原型开始开发，最初只针对 Vue 的使用场景设计。首个版本发布于 2020 年 4 月 20 日^[1]，其前身是一个基于 ES 模块提供 Vue 单文件组件服务的原型项目^[4]。

2021 年 2 月发布的 Vite 2.0 是第一个稳定版本，也是项目的转折点。开发团队在 1.0 候选阶段决定彻底重构内部架构，使内核与框架无关，框架支持全部改由插件承担，同时把依赖预构建的执行工具从 Rollup 换成 esbuild，并引入兼容 Rollup 的新插件机制与实验性服务端渲染支持^[5]。

2022 年起，Vite 开始被新兴框架广泛用作底层构建工具，包括 Nuxt 3、SvelteKit、Astro 与 SolidStart；2023 年部分 React 元框架也迁移到 Vite 之上，2024 年又出现 TanStack Start 等更多基于 Vite 的方案。据尤雨溪在 2025 年的公开演讲，当时 Vite 的 npm 周下载量已超过 2200 万次^[6]。

随着规模扩大，原有架构的问题逐渐显现：底层同时依赖 esbuild、Rollup、SWC 等多个职责重叠的工具，生产构建速度不及以原生语言编写的打包器，未打包的 ES 模块在大型项目中请求数量过多^[6]。为此团队转而开发以 Rust 编写的 Rolldown 打包器与 Oxc 工具链，用于替换原有组合。按德语维基百科的记载，采用 Rolldown 作为默认打包器的版本于 2026 年发布^[7]。

应用

Vite 最常见的用法是为单页应用提供开发服务器与生产构建。官方脚手架 create-vite 提供 vanilla、Vue、React、Preact、Lit、Svelte、Solid、Qwik 等模板，并均附 TypeScript 版本。构建产物是静态文件，可部署在任意静态资源托管环境中。

Vite 也被设计为可以承载上层框架的底座。它提供类型完整的 JavaScript API 与服务端渲染基础能力，框架作者可以基于这些能力搭建带定制体验的开发环境；Nuxt 等框架已在 Vite 上完成整合^[5]。后端框架同样可以对接，例如 Laravel 自带官方 Vite 插件来处理资源打包与热替换。

在测试与协作方面，Vite 提供了在浏览器中直接运行构建的在线试用方式，方便在不安装本地环境的情况下试验项目模板^[2]。其插件生态也衍生出针对渐进式 Web 应用等场景的扩展。

局限

无打包开发依赖浏览器对原生 ES 模块的支持，项目默认只面向现代浏览器；若需兼容旧版浏览器，须借助官方 plugin-legacy 插件额外生成一份用 Babel 转换、以 SystemJS 形式输出的旧版产物^[8]。

源码只能以 ES 模块书写，非 ESM 的依赖需要先预构建为 ESM 才能工作，Node.js 模块也无法在浏览器中使用。未打包的 ES 模块在大型项目中会产生大量请求，请求数量极大时性能表现下降^[6]。在 Linux 上，文件描述符与 inotify 的限额也可能导致请求停滞。

开发与构建使用不同工具链，行为差异难以完全消除，一度出现同一配置在开发与生产下表现不一致的情况^[9]。使用早期架构时，基于 Rollup 的生产构建也比 esbuild 或 Bun 等原生打包器慢。

官方对工具边界也作了说明：核心保持精简以便长期维护，复杂用例交由插件与 API 承担，因而一些能力需要安装额外插件而非开箱即得。项目对新版本 Node.js 有最低版本要求，版本过低时需先升级运行环境^[2]。

参见

• Rollup —— Vite 生产构建所依赖的模块打包器，其插件接口也是 Vite 插件系统的设计基础。

• esbuild —— 早期用于依赖预构建的打包工具，以编译到原生代码的方式提升速度。

• Vue.js —— 与 Vite 出自同一作者的前端框架，Vite 最初即为其单文件组件开发而设计。

• 尤雨溪 —— Vite 的创建者，同时是 Vue.js 的作者。

• 模块热替换 —— 开发服务器只更新改动模块、保留应用状态所依赖的机制。

• 服务端渲染 —— Vite 提供基础支持的一类页面渲染方式。