📌 项目地址：vitejs/vite | ⭐ 81,082 颗星 | 🔧 TypeScript | 📜 未标注
Vite 这个项目在 GitHub 上已经有超过 81,000 个 star，由尤雨溪创建。官方描述就一句话：“Next Generation Frontend Tooling”。但这句话背后藏着两个实际的设计决策：开发阶段不打包，直接用浏览器原生 ES Module 提供服务；生产构建用 Rolldown（一个 Rust 写的打包器）输出优化后的静态资源。
启动速度和 HMR 的差异到底在哪
传统工具（比如 Webpack）启动时要把整个项目打包一次，项目越大启动越慢。Vite 的开发服务器启动时只做两件事：启动一个静态服务器，把入口 HTML 里引用的模块交给浏览器自己去加载。浏览器遇到 <script type="module"> 后，会按需请求每个模块。这意味着无论项目有多少个文件，第一次启动都只要几秒，因为服务器不需要遍历和打包所有代码。
HMR 的原理也一样：当你改了一个组件文件，Vite 只向浏览器推送这个文件的变更，浏览器用原生 ESM 热替换。不需要像 Webpack 那样重新计算整个模块图。我在一个中等规模的 Vue 项目上试过，改动保存后页面几乎是即时刷新，没有肉眼可见的延迟。
生产构建用的 Rolldown，不是 Rollup
很多文章说 Vite 生产构建用 Rollup，实际上 README 写的是用 Rolldown。Rolldown 是用 Rust 写的打包器，可以输出高度优化的静态资源。不过 Rolldown 目前还在早期阶段，Vite 6 里默认还是 Rollup 进行生产构建（虽然 README 提到 Rolldown，但实际切换时间点不确定）。这点信息值得关注：如果你在生产构建中遇到问题，可以留意官方文档更新。
与 Webpack 的真实差异对比
| 特性 | Vite | Webpack |
|---|---|---|
| 开发模式 | 按需加载，不打包 | 全量打包后服务 |
| 冷启动时间 | 秒级（<2s，与项目规模关系不大） | 秒到分钟级，随模块数线性增长 |
| HMR 粒度 | 只替换变更模块 | 需重新解析依赖图 |
| 生产构建工具 | Rolldown（计划中）/ Rollup | 自研打包器（JS） |
| 插件生态 | 兼容 Rollup 插件，有专属 API | 自家插件体系，数量更多 |
| TypeScript 支持 | 原生无配置（但类型检查需要单独跑） | 需要 ts-loader 或 babel-loader |
Webpack 的优势在于插件生态更老更全，很多企业级场景（比如复杂的微前端、定制化拆包）Webpack 的可配置性更高。Vite 的优势在开发体验：快，几乎没有等待感。
如何开始使用
README 没有给出具体命令行，但提到了 create-vite 这个包（在 Packages 列表中有版本信息）。实际创建项目用的是 npm create vite@latest（这个不在 README 里，是 Vite 官方文档的做法）。如果你想用官方脚手架，直接去 vite.dev/guide/#scaffolding-your-first-vite-project 看。创建后，npm run dev 就能体验到“Instant Server Start”和“Lightning Fast HMR”。
扩展性：插件 API 与 JavaScript API
Vite 设计了“Universal Plugin Interface”，同时兼容大量 Rollup 插件。官方提供了 @vitejs/plugin-legacy 来处理旧浏览器兼容。社区插件支持 Vue、React、Svelte、SSR、PWA 等场景。如果你想定制构建流程，可以看 Plugin API 文档 和 JavaScript API 文档 – README 说这两个 API 都有完整的 TypeScript 类型支持。
需要注意的几个实际点
- 开发模式下要求浏览器支持 ES Module。所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持。如果客户用旧版 IE，生产构建时需要用
@vitejs/plugin-legacy做降级。 - Vite 自身不处理 PostCSS 和 CSS 预处理器，但可以通过插件集成。官方推荐用
vite-plugin-postcss或直接安装对应框架的插件。 - 项目采用 MIT 许可证，随便用。
- Vite 版本迭代很快（现在接近 v6），每版都有 changelog。关注 packages/vite/CHANGELOG.md 可以知道变动。
如果你团队还在用 Webpack 且项目构建时间超过 30 秒，换成 Vite 能明显提升开发效率。至少我试过之后，再也不想等 Webpack 的进度条了。