Vite 设计与实现

深入 Vite 8 的源码与架构。

你改一行代码，浏览器在 50 毫秒内更新了那一个组件——页面没刷新，状态还在。这件事听起来理所当然，做起来要跨越五个系统：文件监听、模块图、更新传播算法、WebSocket、客户端执行引擎。任何一环判断错了，你得到的就是"整页刷新"或者"改了没反应"。

本专栏以 Vite 8.0 源码为解剖对象，把这五个系统一个个拆开。

flowchart TB
  FS[文件变更] --> W[文件监听]
  W --> HMR
  subgraph HMR [HMR 链路]
    direction LR
    H1[handleHMRUpdate] --> H2[propagateUpdate<br/>更新传播算法]
    H2 --> H3[updateModules<br/>组装消息]
  end
  HMR -- WebSocket --> CL[HMRClient<br/>import.meta.hot]
  MG[模块图 ModuleGraph] <--> HMR
  subgraph SRV [Dev Server]
    direction LR
    MW[Connect 中间件栈] --- ENV[DevEnvironment]
  end
  SRV --> MG
  REQ[浏览器请求] --> SRV --> TR[转换管线<br/>JS · CSS · HTML · 资源]
  DEP[依赖预构建<br/>双维度哈希缓存] -.供给.-> SRV
  BUILD[生产构建 · Rolldown] -.同一套插件.-> TR

这个专栏最想让你记住的一件事：Vite 的一切都挂在插件系统上。 dev server 的中间件、转换管线、构建流程，本质都是 Hook 的编排。理解了插件系统与模块图，其余每一章都是它的推论。

读完你能做到什么

写出一个不会在生产构建里失效的插件。 Hook 的完整生命周期、执行顺序、configureServer 的边界，以及 dev 与 build 两条路径上同一个插件的行为差异（第4章插件系统）。
说清一次 HMR 的完整链路。 从 handleHMRUpdate 到 propagateUpdate 的传播算法、消息怎么组装、客户端 import.meta.hot 怎么执行、服务器重启后连接怎么恢复、孤立模块怎么清理（第6章模块图、第7章 HMR）。
看懂 dev server 的骨架。 ViteDevServer 的创建流程、Connect 中间件栈（顺序本身就是一条安全边界）、WebSocket、文件监听、重启机制的真正约束（第5章开发服务器）。
调对依赖预构建。 双维度哈希缓存（lockfile + config 双重保护）、9 种包管理器的 lockfile 格式、配置哈希的字段白名单、依赖扫描与预构建执行（第8章优化器）。
掌握转换管线。 JS/CSS/HTML/静态资源各自的处理路径与相互影响（第9章 JS 转换、第10章 CSS、第11章 HTML、第12章资源）。
用上 Environment API。 Vite 8 最大的范式变化——从"参数化"到"对象化"：DevEnvironment / BuildEnvironment / ScanEnvironment 的类型体系、perEnvironmentPlugin、多环境协作（第16章 Environment API）。
理解生产构建。 Rolldown 引擎、产物优化、SSR 运行时、Worker（第13章构建、第14章优化、第15章 SSR、第17章 Worker）。

适合谁读

有前端工程化经验的开发者：想知道 dev server 的秒开、HMR 的精确更新、产物的分割策略分别是怎么做到的（第5章开发服务器架构、第7章 HMR 热更新、第14章代码分割与产物优化）。
插件作者：Vite 的钩子建立在 Rollup 之上又做了扩展，写插件之前得先弄清每个钩子在什么时候被调用（第4章插件系统与 Hook 机制）。
构建工具爱好者：Rolldown 正在替换 Rollup、Environment API 正在重塑 SSR 的形态，这是 Vite 当下变化最大的两处（第13章 Rolldown 构建引擎、第16章 Environment API）。
想理解"Vite 为什么这么快"的技术人：答案不在某一个优化点上，而在依赖预构建与模块图这几件事的配合（第6章模块图与依赖追踪、第8章依赖预构建）。

源码版本

本专栏的源码引用以 vitejs/vite 的 v8.0.3 为准，构建引擎是这一版默认启用的 Rolldown：

仓库	版本	Git Commit
vitejs/vite	v8.0.3	`a248a41`
rolldown（默认构建引擎）	1.0.0-rc.12	—

git clone https://github.com/vitejs/vite.git
cd vite && git checkout v8.0.3

Vite 8 之后的小版本迭代较快，packages/vite/src/node/ 下的行号会漂移；正文标注的路径与函数名是稳定锚点，行号仅供定位。

版权声明

欢迎分享本专栏的链接。引用少量内容用于评论、教学或研究时，请署名 杨艺韬 并附上原文链接。

Vite 设计与实现

读完你能做到什么

适合谁读

源码版本

目录

第一部分：开篇

第二部分：核心架构

第三部分：开发服务器

第四部分：转换管线

第五部分：构建与生产

第六部分：高级特性

第七部分：总结

版权声明