「我想读 XX 的源码学习，但 clone 下来不知道从哪开始看。」
这个问题我被问过不下十次。每次我的回答都一样，不要从头到尾读源码，带着问题去翻。
为什么不要从头读
一个中等规模的开源项目，代码量通常在 5-50 万行。Astro 的核心代码大约 15 万行，Next.js 超过 30 万行。
从头读意味着你在用线性时间处理树状结构。入口文件调用了十几个模块，每个模块又分叉出十几个子模块，读到第三层你已经忘了第一层的入口是干什么的。
而且源码的大部分内容对你没有价值。构建配置、CI/CD 脚本、测试工具、兼容性处理，这些代码占了一半以上，但不是你想学的东西。
四步源码阅读法
第一步，找一个具体问题
不要说「我想学 Astro 的架构」，要说「Astro 的 Content Layer 是怎么把 Markdown 文件变成可查询的数据集合的」。
问题越具体，搜索范围越窄，效率越高。
第二步，从入口和输出反推
找到两个点，输入从哪进来，输出从哪出去。
以 Astro Content Layer 为例，
- 输入，
src/content/blog/*.md文件 - 输出，
getCollection('blog')返回的数据
入口点是 getCollection，在代码里搜 export.*function.*getCollection，找到定义。看它调了什么，可能是 getEntry，getEntry 又调了 loader 的 load 方法。顺着调用链往下走。
第三步，只读主线，跳过支线
主线是「输入到输出的最短路径」。这条路径上的代码精读，旁边的支线全部跳过。
比如 loader 的 load 方法里可能有缓存逻辑、错误处理、热更新监听，这些是支线。第一次读的时候全部跳过，只看「文件 → 解析 → 返回数据」这条主线。
主线搞懂了，整个机制就理解了 70%。剩下的 30% 在你需要的时候再回来翻。
第四步，画一张图
读完之后画一张流程图。不用很正式，手画也行，关键是自己能复现整个流程。
如果你画不出来，说明有环节没搞懂，回去补。
实际例子：我读 Astro Island 架构的过程
问题，Astro 的 Islands 架构是怎么做到页面静态输出但组件可交互的？
反推路径，
- 输出端，HTML 里有
<astro-island>自定义元素 - 输入端，
.astro文件里组件标记了client:load或client:visible
搜索 astro-island，找到 client-runtime/island.ts，这是一个 Custom Element 定义，监听 client:visible 触发时 hydrate 组件。
搜索 client: 指令处理，找到 compiler/transform.ts，编译时把 client:load 转成 <astro-island> 标签加属性。
主线就两条，
- 编译时，
client:xxx指令 →<astro-island>标签 - 运行时，
<astro-island>Custom Element → 检测触发条件 → hydrate
整个 Island 架构的核心就这么简单。剩下的细节（SSR 渲染、组件序列化、hydration 策略）是支线，需要的时候再翻。
工具推荐
- Sourcegraph 或 GitHub 自带搜索，比本地 grep 快，支持正则和语言感知
- Astro 的
trace命令，如果你读的是支持 trace 的项目，跑一遍 trace 看调用链 - 断点调试，
node --inspect-brk启动项目，Chrome DevTools 里打断点，跟着执行流走
什么时候读源码
不是所有问题都需要读源码。先看文档，文档没有再看源码。
但有些问题文档不会写，性能优化细节、边界条件处理、架构权衡，这些只能从源码里学。
读源码不是目的，是手段。每次读源码前问自己，我要解决什么问题？如果答不上来，先别读。