Vite 设计与实现

前言

作者 杨艺韬 · 766 字

前言

写作动机

2024 年,当 Evan You 在 ViteConf 上宣布 Rolldown——一个用 Rust 重写的 Rollup 兼容打包器将成为 Vite 的默认构建引擎时,前端社区意识到:Vite 不再只是一个"快速开发服务器",而是一整套重新定义前端工程化的基础设施。

从 Vite 1.0 到 8.0,它经历了从实验性工具到行业标准的蜕变。今天,React、Vue、Svelte、Solid、Astro、Nuxt、Remix——几乎所有主流框架都将 Vite 作为推荐甚至唯一的构建工具。但大多数开发者对 Vite 的理解停留在 vite.config.tsnpm run dev

这本书要回答的问题是:Vite 内部到底发生了什么?

当你执行 vite dev 时,一个 HTTP 服务器如何在毫秒级响应模块请求?当你修改一个文件时,HMR 如何精确地只更新受影响的模块?当你执行 vite build 时,Rolldown 如何将数千个模块打包成最优的产物?

这些问题的答案,藏在 Vite 的 11 万行源码里。

这本书讲什么

本书不是 Vite 的使用教程——官方文档和社区教程已经足够好了。

本书聚焦于设计与实现

每一章从设计意图出发,深入源码实现,最后提炼可迁移的设计模式。大量使用 Mermaid 图表帮助理解复杂的数据流和架构关系。

本书读者

本书组织

graph LR
    A["Ch1-2\n为什么 & 架构"] --> B["Ch3-4\n配置 & 插件"]
    B --> C["Ch5-8\n开发服务器\n模块图·HMR·预构建"]
    C --> D["Ch9-12\n转换管线\nJS·CSS·HTML·资源"]
    D --> E["Ch13-14\n构建 & 优化\nRolldown"]
    E --> F["Ch15-17\n高级特性\nSSR·Env API·Worker"]
    F --> G["Ch18\n设计模式总结"]

从外到内、从宏观到微观:先建立全景认知(架构),再深入核心引擎(开发服务器),接着逐个击破各转换管线,最后总结可迁移的设计智慧。

源码版本

本书基于 Vite 8.0.3 源码分析,使用 Rolldown 1.0.0-rc.12 作为默认构建引擎。建议将源码 clone 到本地边读边对照:

git clone https://github.com/vitejs/vite.git

核心代码在 packages/vite/src/ 目录下。

感谢 Evan You 和 Vite 团队创造了这个改变前端开发体验的工具,并保持开源让所有人都能学习其中的智慧。