为什么读这本书
「会用」和「懂为什么」之间,差着这本书。
中文社区的 Vite 教程大多停在配置层面。本指南把那些"黑盒"全部拆开。
为什么 Vite 在 dev 模式不打包?
ESM + 浏览器原生 import · Part 1
resolveId / load / transform 各自什么时机触发?
Hooks 时序图 · Part 3
import.meta.hot 背后的 WebSocket 协议长什么样?
HMR 协议拆解 · Part 4
pre / 默认 / post 顺序如何影响插件行为?
插件执行顺序 · Part 2
为什么 build 用 Rollup 而不是 esbuild?
双引擎架构 · Part 1
十二章,把 Vite 从入门带到源码导读。
主轴 60% 篇幅深挖核心机制、Hooks 与 HMR;辅助 40% 覆盖框架集成、库模式、SSR、性能优化与 Monorepo。
- PART 00
入门铺垫
Vite 为何而生,五分钟跑通第一个项目。
4 节▮▯▯▯ - PART 01
核心概念
Native ESM、双引擎架构、依赖预构建、Module Graph。
4 节▮▮▯▯ - PART 02
插件系统主轴
插件结构、enforce 顺序、调试技巧、第一个虚拟模块插件。
6 节▮▮▯▯ - PART 03
Hooks 深度解析主轴
构建期 hooks、Vite 独有 hooks、Environment API、两个实战插件。
9 节▮▮▮▯ - PART 04
HMR 热更新主轴
WebSocket 协议、import.meta.hot、框架的 Fast Refresh 内幕。
5 节▮▮▮▯ - PART 05
生产构建
Rollup 在 Vite 里的角色、资源管线、代码分割、图片优化实战。
5 节▮▮▯▯ - PART 06
SSR & SSG
ssrLoadModule、手写 SSR、静态生成模式。
3 节▮▮▮▯ - PART 07
框架集成
React / Vue / Svelte / Solid + meta 框架对比。
5 节▮▮▯▯ - PART 08
库模式
build.lib 全解、类型声明、跨框架组件库实战。
3 节▮▮▯▯ - PART 09
Monorepo 工程化
pnpm workspace、依赖预构建跨包问题、Turborepo 编排。
4 节▮▮▯▯ - PART 10
性能优化
冷启动、HMR 诊断、bundle 分析、tree-shaking 实战。
4 节▮▮▮▯ - PART 11
真实世界插件赏析
auto-import / plugin-pages / plugin-react 源码导读 + auto-import 复刻。
4 节▮▮▮▮
八个实战项目
不只是看懂,要能写出来。
虚拟模块插件
用 resolveId + load 凭空生成一个模块
产出:一个可发布的 npm 插件雏形
Markdown 加载器
把 .md 文件变成可热更的 React 组件
i18n 自动注入
transformIndexHtml + resolveId 组合
图片优化插件
集成 sharp,自动生成 webp / avif
手写 SSR
纯 Vite + Express,不用任何框架
跨框架组件库
一次构建,产出 React/Vue/Svelte/Solid 适配
Monorepo 模板
复刻本站结构:apps + packages + content
简化版 auto-import
对标 unplugin-auto-import 的核心机制
关于作者
「写一份自己希望两年前能读到的指南。」
Jay(Yonjay)是一位前端工程师,长期在做构建工具与开发者体验。这本指南源于一个观察:Vite 已经普及,但真正理解它内部机制的中文资料非常稀少。