Vite构建核心是“依赖预构建+源码按需编译+原生ESM驱动”：启动前用esbuild将node_modules转为ESM存入.vite/deps；开发时浏览器请求源码，Vite实时转换Vue/TS/CSS等；全程依托浏览器原生import，跳过模拟模块系统，实现秒启与精准HMR。
画 JS 中 Vite 构建核心知识点的思维导图，关键不是堆砌术语，而是理清“开发时发生了什么”和“为什么这么设计”。重点落在依赖预构建、源码按需处理、ESM 原生支持这三根主干上。
依赖预构建（Dep Pre-Bundling）
这是 Vite 启动时最耗时也最关键的一步，本质是把第三方包提前打包成浏览器友好的单文件。
- 触发时机：Dev Server 启动前自动扫描
import语句，识别 node_modules 中的依赖 - 产物位置：
node_modules/.vite/deps/，比如vue.js、lodash.js - 底层工具：用 esbuild（极快）而非 Webpack 或 Rollup，不走 bundle 流程，只做格式转换（如 CJS → ESM）和 chunk 拆分
- 作用：避免浏览器逐个请求上百个模块文件，解决冷启动慢、HTTP 请求多、CJS 不兼容 ESM 等问题
源码按需编译（On-Demand Compilation）
Vite 对你自己写的代码（.js/.vue/.ts）不做预先打包，而是在浏览器请求时实时转换。
- 路径重写：拦截
import './src/App.vue'请求，内部解析为/@vite/client和/src/App.vue?type=style&index=0等虚拟模块 - 转换能力：支持 Vue SFC 解析、TypeScript 编译（通过 TypeScript API）、CSS 预处理器（less/sass）、JSON 导入等
- 优势：改一行代码，只重新处理对应模块，跳过整个打包链路，热更新极快
原生 ESM 驱动开发体验
Vite 的“快”不是靠省略构建，而是把构建责任部分交还给浏览器，自己专注做精准调度。
- 开发服务器本质是一个中间层：接收浏览器 ESM import 请求 → 动态生成响应内容 → 返回给浏览器执行
- 无需模拟模块系统：不生成
__webpack_require__，不注入 runtime，所有逻辑基于浏览器原生import - 直接影响：HMR 更精准（组件级更新）、调试体验更真实（source map 直连源码）、启动几乎无延迟（依赖预构建可缓存）
可补充的延伸分支
在思维导图末梢可加几个实用锚点，帮助落地理解：
-
配置项关联：如
optimizeDeps.include强制预构建某些包；server.hmr.overlay控制错误提示样式 -
常见问题定位：页面白屏？查
.vite/deps/_metadata.json是否生成；HMR 失效？看是否用了动态import()未被正确识别 - 与传统打包对比：Webpack 是“全量打包 + 模块模拟”，Vite 是“依赖打包 + 源码代理”，二者目标一致（让代码跑起来），路径不同
