基石：浏览器原生 ES Modules

ES Modules 是 JavaScript 官方的模块化标准。现代浏览器（除了 IE）都已经原生支持它。这意味着：

你可以在 HTML 中通过 <script type="module"> 直接加载一个 JavaScript 文件，浏览器会把它当作模块处理。
模块内部可以使用 import 和 export 语句。
当浏览器解析到 import 语句时，它会自动发起 HTTP 请求 去获取这个导入的模块。

举个例子，下面的代码是直接在浏览器中运行的：

<!-- index.html -->
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  console.log(createApp);
</script>

浏览器会下载 vue.esm-browser.js 并执行。整个过程完全不需要打包工具介入。

Vite 正是利用了这个能力——它不打包，而是让浏览器自己去请求模块。

Vite 开发服务器的工作流程

Vite 在开发环境下启动的服务器，本质上是一个 按需编译的 HTTP 文件服务器。它的工作流程如下：

1. 启动瞬间：只启动服务器，不打包

当你运行 npm run dev 时，Vite 做了两件简单的事：

启动一个基于 connect 的 Node.js 服务器。
对该项目进行一次 依赖预构建（用 esbuild 把第三方依赖打包成单个或几个 ESM 文件，这一步是为了优化性能，稍后会详述）。

此时，服务器已经就绪，但并没有对项目源代码做任何处理。你访问 http://localhost:5173，服务器直接返回 index.html 文件。

2. 浏览器请求入口

浏览器解析 index.html，发现其中有 <script type="module" src="/src/main.js">，于是向 Vite 服务器发起对 /src/main.js 的请求。

3. 服务器按需编译

Vite 服务器收到请求后，会做这些事情：

读取源文件：从磁盘读取 main.js。
转换代码：如果 main.js 中包含了浏览器无法直接识别的内容（例如 JSX、TypeScript、Vue 单文件组件），Vite 会使用相应的插件（如 @vitejs/plugin-vue）将其转换成纯 JavaScript。
改写导入路径：main.js 中可能还有对第三方库的导入，比如 import { ref } from 'vue'。Vite 会将这个路径改写成指向预构建产物的路径，例如 import { ref } from '/node_modules/.vite/deps/vue.js'。这是因为浏览器无法直接解析裸模块名（bare module specifier）。
返回结果：将转换后的 JavaScript 代码作为响应体返回给浏览器。

4. 递归请求依赖

浏览器接收到 main.js 的代码后开始执行，发现里面又有 import 语句，于是再次向 Vite 服务器发起新的请求。服务器会重复步骤 3，按需编译每个被请求的模块。

这个过程会一直持续，直到所有被引用的模块都加载完毕。

为什么“按需”这么快？

只编译被请求的文件：Vite 永远不会去编译那些当前页面没访问到的文件。哪怕项目里有 10,000 个 Vue 文件，只要用户没打开对应的路由，它们就只是静静地躺在磁盘上，不会占用任何编译时间。
缓存：Vite 对编译过的文件会设置强缓存（Cache-Control: max-age=31536000, immutable），除非文件内容变化，否则浏览器不会再请求。对于模块之间的依赖图，Vite 也使用了内存缓存。
依赖预构建：虽然这一步是提前做的，但它只针对第三方库（node_modules），并且只在第一次启动时做（或者依赖变化时重新做）。预构建有两个目的：
1. CommonJS 转 ESM：让那些不是 ESM 格式的库也能在浏览器中运行。
2. 合并小模块：有些库（如 lodash-es）会拆分成几百个文件，如果不合并，浏览器需要发几百个请求，可能拖慢首屏。预构建会把它们合并成几个大文件，减少请求数量。

对比 Webpack 的打包模型

特性	Webpack 开发服务器	Vite 开发服务器
启动时	遍历整个依赖图，打包所有模块（即使还没用到）后才启动服务器。	只启动服务器，不打包源代码；执行一次依赖预构建。
文件处理时机	一次性全部编译，结果存入内存中的 bundle。	仅在浏览器请求该文件时编译，编译后立即返回。
更新时（HMR）	修改一个文件，需要重新打包该模块及其依赖链，替换 bundle 中的部分代码。	修改一个文件，只重新编译该文件，通过 WebSocket 通知浏览器热更新。

一个简单的例子说明

假设项目只有一个入口文件 main.js，它导入了 a.js 和 b.js，而 a.js 又导入了 c.js。

Webpack：启动时，Webpack 会找到 main.js，发现它依赖 a.js 和 b.js，又发现 a.js 依赖 c.js，于是把 main.js、a.js、b.js、c.js 全部编译并打包成一个 bundle.js 文件。然后把这个 bundle 注入 HTML，启动完成。
Vite：启动时，Vite 只做预构建（如果有需要）。浏览器请求 index.html，然后请求 main.js。Vite 编译 main.js 返回。浏览器执行 main.js，发现要导入 a.js 和 b.js，于是发起两个新请求。Vite 收到请求后编译 a.js 返回，浏览器执行 a.js，发现要导入 c.js，再发起请求，Vite 编译 c.js 返回……直到所有模块加载完毕。

看到区别了吗？Vite 把“打包”这件事从服务器端转移到了浏览器端，让浏览器自己去处理依赖关系和模块加载。 服务器只需要按需提供编译后的单个文件即可。

总结：Vite 按需编译的关键点

信任浏览器：Vite 相信现代浏览器能够高效地处理 ESM 模块加载。
服务器架构：开发服务器是一个按需编译的 HTTP 服务器，而不是一个打包器。
即时编译：只有被请求的文件才会被编译，编译结果被缓存。
依赖预构建：优化第三方库的加载性能，减少请求数量，同时解决裸模块导入问题。

这套设计使得 Vite 的启动速度与项目规模几乎无关，永远能保持极快的响应。即使项目增长到成千上万个文件，开发体验依然流畅。这就是它能够“按需”的秘密。

Vite底层编译原理以及为什么如此之快