1. 目标与架构总览

你好，欢迎来到 mini-vite 的世界！

在正式启程之前，我想先问你一个问题：你是否曾想过，当我们谈论“前端构建工具”时，我们到底在谈论什么？

你可能会想到 Webpack、Rollup、Parcel 这些名字。它们就像是前端开发者的“瑞士军刀”，能处理代码转换、打包、优化等一系列繁琐的工作。但你是否也曾被它们复杂的配置、缓慢的启动速度所困扰？

Vite 的出现，就是为了解决这些“痛点”。它像一股清流，为前端开发带来了前所未有的畅快体验。

Vite 的核心目标：快！

如果用一个词来概括 Vite 的核心目标，那就是——快。

这种“快”体现在两个核心环节：

极速的开发服务器启动：传统的构建工具（如 Webpack）在启动时，需要提前将所有模块打包（bundle）一遍，这个过程被称为 bundle-based dev server。如果你的项目很庞大，这个启动过程可能会长达数分钟。而 Vite 另辟蹊径，它利用现代浏览器原生支持的 ES 模块（ESM）特性，实现了一个 native ESM-based dev server。它只在浏览器请求某个模块时，才按需进行转换和提供，省去了漫长的预打包过程。你可以把它想象成“即时编译”，而不是“提前编译”。
高效的热模块更新（HMR）：当你修改代码时，Vite 的 HMR 同样受益于原生 ESM。它不需要重新构建整个包，而是能够精确地定位到修改的模块，并只让这部分模块失效。这使得无论你的应用规模有多大，HMR 的速度都能保持在一个极快的水平。

Vite 的“快”并非凭空而来，它建立在两大坚实的支柱之上：

这是 Vite 在开发环境下实现“极速”的关键。想象一下，你的项目就像一个巨大的乐高城堡，里面有成百上千个模块（乐高积木）。

传统构建工具（Webpack）：在启动时，它会把所有的积木都检查一遍，然后按照图纸（依赖关系）把它们组装成一个完整的城堡。这个过程很耗时。
Vite：它不会提前组装。当你（浏览器）说“我需要城堡的大门”时，Vite 会立刻找到“大门”这块积木，稍作处理（比如上色），然后直接递给你。当你需要“塔楼”时，它再递给你“塔楼”。整个过程是按需、即时的。

这种模式从根本上改变了开发服务器的工作方式，使得项目的冷启动和代码更新速度得到了质的飞跃。

当你的“乐高城堡”设计完成，准备正式“展出”（部署到生产环境）时，我们还是希望把它打包成一个或几个紧凑的整体，这样加载速度更快，也更利于优化。

这时，Vite 选择了社区中久经考验的打包工具 Rollup 来完成这项工作。Rollup 以其高效和强大的 Tree-shaking（摇树优化）功能而闻名，能够生成高度优化的生产代码。

所以，Vite 的架构可以总结为：

这种“双核”架构，让 Vite 在开发和生产两个场景下都表现出色，做到了“鱼与熊掌兼得”。

在接下来的章节中，我们将亲手实现一个 mini-vite，一步步揭开它内部的神秘面纱，深入理解这两大支柱是如何协同工作的。准备好了吗？让我们开始这场激动人心的探索之旅吧！