在了解 Vite 如何利用“原生 ESM 加载”之前，我们先回顾一下浏览器处理模块的基本流程：

1. 浏览器加载入口模块

   在你的 index.html 中，通常会有这样一行：

   <script type="module" src="/main.js"></script>
   
   

   浏览器看到 type="module" 就会用 ES Module 规范来处理它：先发一个 HTTP GET 请求拿 /main.js，然后解析其中的 import 语句，依次再去请求其他模块。

2. HTTP 请求到来时被 Vite Dev Server 拦截

   当浏览器请求任何以 .js、.ts、.vue 等结尾的资源时，这些请求都会打到正在运行的 Vite 开发服务器上。Vite 不会像传统打包器那样先把所有代码打包好再发，而是在收到请求的那一刻：

   • 模块解析：分析请求的模块路径，是文件系统路径还是“裸模块名”（如 import vue from 'vue'）？
   • 依赖预处理：对于“裸模块名”，Vite 会在内部把它映射到 /node_modules/.vite/deps/xxx.js?v=hash 这样一个真实可请求的 URL (vite.dev)。
   • 按需编译：对 TypeScript、JSX、甚至 Vue/Svelte 单文件组件，Vite 都通过 esbuild 在毫秒级完成转换，并把最终的合法 ESM 代码返回给浏览器 (medium.com)。

3. 浏览器执行并再次发起新的模块请求

   浏览器收到编译后的模块代码后会立即执行，同时解析里面的 import，产生新的 HTTP 请求，这些请求依旧被 Vite 拦截、解析、编译，然后返回。如此循环，直到所有模块都加载完毕。

核心要点总结

• 无预打包：开发时没有“先打包再发”这一环节，所有模块都是按需请求、按需编译，启动和修改速度极快。
• 请求即编译：每个模块请求都会触发一次快速的 esbuild 转换，不会浪费时间在未用到的代码上。
• 裸模块名映射：Vite 在服务器端将 import 'vue' 这样的路径，映射为浏览器能直接请求到的文件 URL（通常带有版本哈希以支持缓存）。

通过这种方式，Vite 借助浏览器自身的 ESM 能力，实现了近乎“零启动”时间的开发体验，同时保留了对 TS/JSX、框架组件等所有高级特性的支持。