《Vite 设计与实现》完整目录
第1章 为什么需要理解 Vite
"工具的价值不在于它做了什么，而在于它让你不再需要思考什么。"
:::tip 本章要点
- 理解前端构建工具从 Webpack 到 Vite 的演进动力
- 掌握 Vite 的两大核心创新：原生 ESM 开发服务器与 Rolldown 构建引擎
- 明确深入源码的价值：从"会用"到"理解为什么这样设计"
- 建立全书的阅读路线图 :::
1.1 前端构建工具的三次变革
前端构建工具的演进史，本质上是一部开发体验与生产性能的博弈史。
第一代：打包一切（Webpack 时代）
Webpack 的核心理念是"万物皆模块"------JS、CSS、图片、字体，所有资源都通过 loader 转换为 JavaScript 模块，最终打包成 bundle。这在 2015 年是革命性的，但随着项目规模增长，问题浮现了：
- 冷启动慢 ：一个中型项目（5000 个模块）的
webpack-dev-server启动需要 30-60 秒 - 热更新慢：修改一个文件后，需要重新构建整个 chunk 图
- 配置复杂 ：
webpack.config.js动辄数百行，loader/plugin 的组合爆炸
第二代：编译加速（esbuild/swc 时代）
esbuild（Go）和 swc（Rust）用系统语言重写了 JavaScript 编译器，将转换速度提升了 10-100 倍。但它们解决的是编译速度 问题，而不是架构问题------开发服务器仍然需要先打包再服务。
第三代：按需服务（Vite 时代）
Vite 的突破不在于更快的编译器，而在于架构创新：
开发阶段，Vite 利用浏览器原生 ESM 支持，不打包、不构建，浏览器请求哪个模块就实时转换哪个模块。这让冷启动从"分钟级"降到"毫秒级"。
生产阶段，Vite 使用 Rolldown（Rust 编写的 Rollup 兼容打包器）进行优化构建，兼顾性能与产物质量。
1.2 Vite 的核心设计哲学
开发与生产的分离
这是 Vite 最根本的架构决策：开发和生产使用完全不同的策略。开发追求速度（原生 ESM + 按需转换），生产追求质量（Rolldown + 优化）。
插件优先
Vite 的核心非常小------大部分功能（CSS 处理、TypeScript 编译、HTML 转换、资源处理）都通过内置插件实现。用户插件和内置插件使用完全相同的 Hook 接口，没有特权 API。
约定优于配置
零配置即可处理 TypeScript、JSX、CSS Modules、静态资源。只有当你需要定制时才需要配置。
1.3 为什么要读 Vite 源码
超越文档的理解
文档告诉你 import.meta.hot.accept() 可以注册 HMR 回调，但不会告诉你：
- HMR 更新如何从文件变更传播到浏览器
- 模块图的"软失效"和"硬失效"有什么区别
- 循环依赖在 HMR 中如何处理
插件开发的底层知识
如果你要开发 Vite 插件，理解内置插件的实现会帮你：
- 知道每个 Hook 的最佳使用时机
- 避免与内置插件冲突
- 利用内部 API 实现更强大的功能
可迁移的架构模式
Vite 源码中有大量可迁移到其他项目的设计模式：
- 中间件栈的请求处理管线
- 基于图的依赖追踪与失效传播
- 增量式依赖发现与预构建
- 多环境隔离架构
1.4 本书的组织方式
- 架构层（第1-2章）：建立全景认知
- 基础设施层（第3-4章）：配置系统与插件机制
- 开发服务器层（第5-8章）：服务器、模块图、HMR、预构建
- 转换管线层（第9-12章）：JS/CSS/HTML/资源的处理
- 构建层（第13-14章）：Rolldown 集成与产物优化
- 高级特性层（第15-17章）：SSR、Environment API、Worker
- 总结层（第18章）：可迁移的设计模式
每一章都会大量使用 Mermaid 图表来可视化数据流、状态机和架构关系，帮助你建立清晰的心智模型。
让我们开始吧。