别再默默等 Bundling 了：重新认识 Vite 和它的极速前端时代

如果你有那么一点点的前端开发经验，一定对这个场景不陌生：

敲下 npm run dev，去喝口水，顺便翻翻邮件，回到座位一看——终端里的编译——还没完。。。

随着前端工程化迅速扩张，Webpack、Parcel 等打包工具虽然带给我们前所未有的模块化体验，但也带来了令人头疼的开发启动慢和热更新（HMR）卡顿问题。项目越做越大，开发者的时间就在一次次等待中被悄悄掏空。

直到 Vite 的出现，像一记闪电打破了这种沉闷。

今天，无论是 Vue、React，还是 Svelte、SolidJS，Vite 几乎成了新项目的标配。现在我们来看看 Vite 到底凭什么这么快、它的底层设计巧思，以及在最新的技术演进中它带给了我们怎样的惊喜。

1. Vite 到底是个啥？

“Vite” 源自法语，意为“快速”，发音类似 /vit/（读作“Veet”）。它是由 Vue.js 的作者尤雨溪（Evan You）于 2020 年发起的下一代前端构建工具。

简单来说，Vite 主要包含两部分：

一个极速的开发服务器（Dev Server）：利用原生 ES 模块（Native ESM）实现毫秒级的冷启动和按需编译。
一套高度集成的打包指令：基于 Rollup 提供开箱即用的生产环境构建能力，并配有极具扩展性的插件 API。

2. 为什么 Vite 能快得让人掉眼泪？

要搞懂 Vite 的快，先得看看传统构建工具（比如 Webpack）是怎么工作的。

传统打包器（Bundler-based）

传统的构建工具在启动开发服务器前，必须抓取并构建你的整个应用程序。即使你有几千个模块，它也必须先打包成 bundle，才能把服务跑起来。

[所有源文件] ──> [递归分析依赖] ──> [打包 Bundling] ──> [启动 Dev Server]

Vite 的“按需编译”思路

Vite 完全推翻了这个逻辑。它利用了现代浏览器天然支持 Native ES Modules (<script type="module">) 的特性。

Vite 启动时，完全不需要打包，直接拉起开发服务器！当浏览器请求某个页面时，根据 HTML 文件里的入口，按需加载并编译当前页面用到的 .vue 或 .tsx 文件。

[启动 Dev Server] ──> [浏览器请求 Module] ──> [Vite 按需编译该文件] ──> [返回给浏览器]

这种机制带来了三个极具颠覆性的优势：

① 零等待的冷启动（Cold Start）

无论你的项目有 10 个文件还是 10,000 个文件，Vite 开发服务器的启动速度几乎是一样的——通常在 100ms - 300ms 之间。

② 不随项目变大而变慢的热更新（HMR）

在传统打包器中，修改一个文件可能会引发局部甚至全局的重新打包。而在 Vite 中，当你修改了一个模块，Vite 只需要让浏览器重新请求这单个模块即可，其他模块继续使用浏览器缓存。HMR 的速度与项目整体规模彻底解耦。

③ 依赖预构建（Dependency Pre-Bundling）与 esbuild

写代码时我们经常引入大量的第三方库（比如 lodash-es、three.js）。如果浏览器直接去请求由上千个内部小模块构成的库，网络并发请求会直接把浏览器卡死。

Vite 引入了用 Go 语言编写的高性能构建工具 esbuild 来做“依赖预构建”：

将 CommonJS / UMD 格式的第三方包统一转换为 ESM。
将拥有数百个内部模块的第三方包（如 lodash-es）合并为一个单一模块，大大减少网络 HTTP 请求数。

由于 esbuild 是用 Go 写的，其处理速度比传统的 JS 打包器快 10 到 100 倍。

3. 开箱即用的“爽快感”

大家喜欢 Vite，不仅是因为快，还因为它的零配置体验（Zero-config DX）。

在以前，为了配置 TypeScript、JSX、Less/Sass 以及环境变量，我们往往需要写几百行的打包配置文件。但在 Vite 项目中：

TypeScript / JSX：天然支持，直接写 .ts / .tsx，无需配置复杂的 loader。
CSS 预处理器与 PostCSS：只要安装了 sass 或 less，在代码里直接 import './style.scss' 就能用。
静态资源处理：图片、Worker、WebAssembly 导入开箱即用。
环境变量：内置 .env 文件支持，使用 import.meta.env.VITE_APP_TITLE 安全访问。

4. 生产环境构建与演进：Rollup 到 Rolldown

也许你会问：“既然 Native ESM 这么好，生产环境是不是也能不用打包？”

答案是：目前生产环境依然建议打包。

因为在真实的线上生产环境中，为了获得最佳的网络加载性能（减少 RTT 延迟、树摇 Tree-shaking、代码分割 Code Splitting、懒加载优化等），打包依然是不可或缺的。

Vite 目前在生产环境默认使用 Rollup 进行打包。由于 Vite 的插件接口与 Rollup 保持了高度兼容，你可以轻松复用庞大的 Rollup 插件生态。

?? 未来展望：Rolldown

为了解决开发环境（esbuild）与生产环境（Rollup）构建行为的不一致，Vite 团队目前正在全力打造 Rolldown——一个用 Rust 编写的、兼容 Rollup API 的极速打包器。未来当 Rolldown 完全整合进 Vite 后，开发与生产打包将达成完美的统一与极致的性能升级。

5. 快速上手：一分钟搭建 Vite 项目

体验 Vite 最简单的方式就是直接使用官方脚手架 create-vite。

在终端中运行：

# 使用 npm
npm create vite@latest

# 或者使用 pnpm
pnpm create vite

按照交互式提示，选择你喜欢的框架（Vue, React, Vanilla, Preact, Lit, Svelte, Solid 等）以及是否启用 TypeScript：

? Project name: my-vite-app
? Select a framework: ? React
? Select a variant: ? TypeScript

Done. Now run:
  cd my-vite-app
  npm install
  npm run dev

运行 npm run dev，你会真正体会到什么叫“秒开”。