利益相关声明本文作者为 AiReadCode 项目的独立开发者以下内容包含对该项目的技术思路分享与个人使用体验旨在探讨 AI 时代源码阅读工具的设计取舍。文中观点仅代表个人不构成任何购买建议。一、AI 写代码越多我们越读不懂代码过去两年Cursor、GitHub Copilot、Claude Code 等 AI 编程工具彻底改变了开发者的工作流。写一个组件、调一个 API、甚至生成整个模块AI 都能在几秒内完成。但一个反直觉的现象正在发生代码库的膨胀速度远超我们的理解速度。以 Vue3 核心仓库为例packages/reactivity/src目录下就有reactive.ts、effect.ts、ref.ts、computed.ts等十余个文件加上compiler-core、compiler-dom、runtime-core等模块整个vuejs/core仓库的 TypeScript 代码量超过 10 万行。当你需要排查一个响应式丢失的 bug或者想理解v-model在编译时到底生成了什么你会发现断点从reactive.ts跳到effect.ts再跳到dep.ts最后迷失在scheduler.ts的微任务队列里问 AI 一个问题它给你一段解释但下一个问题又得重新描述上下文读完一个函数合上文件脑子里只剩零散的片段没有全局地图。AI 帮我们写得越快我们越需要一个能帮我们“读透”代码的工具。这就是我开发 AiReadCode 的初衷——它不做代码生成而是尝试把陌生代码库变成一本可读、可跳转、可检索的书。二、源码阅读的三大断层为什么你总是“读了就忘”2.1 物理行号断层从reactive.ts:42到effect.ts:189的思维跳跃假设你在读 Vue3 响应式的核心入口// packages/reactivity/src/reactive.tsL42:exportfunctionreactiveTextendsobject(target:T):ReactiveT{L43:if(isReadonly(target)){L44:returntargetasanyL45:}L46:returncreateReactiveObject(L47:target,L48:false,L49:mutableHandlers,L50:mutableCollectionHandlers,L51:reactiveMapL52:)L53:}你想知道createReactiveObject里get拦截器怎么触发依赖收集于是跳到baseHandlers.ts的createGetter// packages/reactivity/src/baseHandlers.tsL30:functioncreateGetter(isReadonlyfalse,shallowfalse){L31:returnfunctionget(target:Target,key:string|symbol,receiver:object){L32:// ...L33:constresReflect.get(target,key,receiver)L34:if(!isReadonly){L35:track(target,TrackOpTypes.GET,key)L36:}L37:returnresL38:}L39:}接着你又要跳到effect.ts看track如何把当前activeEffect存入Dep// packages/reactivity/src/effect.tsL150:exportfunctiontrack(target:object,type:TrackOpTypes,key:unknown){L151:if(!isTracking())returnL152:letdepsMaptargetMap.get(target)L153:if(!depsMap){L154:targetMap.set(target,(depsMapnewMap()))L155:}L156:letdepdepsMap.get(key)L157:if(!dep){L158:depsMap.set(key,(depcreateDep()))L159:}L160:trackEffects(dep)L161:}问题来了当你关掉effect.ts回到reactive.ts继续读mutableHandlers的set逻辑时你已经忘了track里activeEffect是怎么被赋值的。传统 IDE 的“跳转”是线性的而源码阅读需要的是网状回溯。2.2 上下文断层AI 问答的“碎片化陷阱”你问 AI“Vue3 的computed如何实现惰性求值” AI 给你一段ComputedRefImpl的代码解释。但当你接着问“那它和effect的scheduler怎么配合” AI 需要你重新粘贴上下文。每一次问答都是孤立的无法形成连贯的认知链条。2.3 架构断层Monorepo 里的“迷宫效应”Vue3 采用 pnpm Monorepopackages/下有 20 多个子包。reactivity依赖sharedruntime-core依赖reactivity和sharedcompiler-core又依赖shared和compiler-sfc。当你修改一个shared里的工具函数影响面可能横跨编译时和运行时。没有全局依赖拓扑你永远不知道自己站在哪一层。三、破局思路把代码库“编译”成一本书既然 AI 能写代码为什么不能让它帮我们“写一本关于代码的书”AiReadCode 的核心思路是用 AI 对代码库进行架构级解析生成一本带有精确行号锚点的技术专著。3.1 技术底座Tauri Rust 本地解析源码绝不上传AiReadCode 是一个基于Tauri React Rust的跨平台桌面客户端。它直接扫描你本地的代码库在本地完成 AST 解析和依赖拓扑分析。对于企业私有代码所有源码切片和解析结果都留在本地不会上传到任何服务器。Rust 后端负责高性能的全文本检索和依赖图构建。具体技术选型上AST 解析采用swc生态的swc_ecma_parser依赖图算法基于petgraph库实现有向图构建与拓扑排序。以 Vue3 的reactivity包为例AiReadCode 会自动识别出reactive.ts导出的reactive、shallowReactive、readonly等 APIeffect.ts中的ReactiveEffect类与track/trigger的调用关系dep.ts中Dep与Link的双向链表设计跨包依赖vue/shared的isObject、hasChanged被reactivity引用。这些关系会生成一张AI 项目地图让你在阅读前就拥有全局视野。性能方面在 M1 MacBook Pro 上对 10 万行 TypeScript 代码进行完整 AST 解析与依赖图构建耗时约 2.3 秒内存峰值控制在 180MB 以内。3.2 FACT 行号对齐终结“跳转即迷失”AiReadCode 最硬核的技术突破是FACTFile-Accurate Code Tracking物理行号对齐。它在源码切片时为每一行加上L{num}:前缀作为物理锚点生成的书籍正文中会嵌入精确的行号引用例如在packages/reactivity/src/reactive.ts中createReactiveObject函数位于第 42-58 行。它首先检查目标是否已经是 Proxy然后根据targetTypeMap选择mutableHandlers或readonlyHandlers。packages/reactivity/src/reactive.ts:42-58当你在 AiReadCode 的阅读器中点击这个锚点它会直接打开SourceCodeViewer加载完整的reactive.ts文件并高亮第 42-58 行。你不再需要在几十个文件间手动跳转阅读路径由书籍结构自动串联。FACT 行号对齐的工程实现难点在于源码切片后原始行号与切片行号之间需要建立双向映射。我们采用了一种轻量级的行号索引表在切片时记录每个切片的起始行号与偏移量并在渲染书籍正文时通过remark插件将锚点转换为可点击的source-link节点。点击时Tauri 前端通过 IPC 调用 Rust 后端根据文件路径和行号范围加载源码并触发高亮。3.3 全书 Pipeline从逐章生成到断点续传AiReadCode 的“成书”不是一次性输出而是一个串行 Pipeline逐章深入撰写按架构模块划分章节每章聚焦一个核心机制如“响应式系统的依赖收集与触发”邻接润色Adjacency Polishing自动检查相邻章节的衔接消除前后割裂感自动生成前言、阅读前必读与术语附录降低阅读门槛合并全书full-book.md支持一键导出 EPUB 与 PDF。更重要的是它支持断点续传。如果生成过程中断下次可以从断点继续不会重复消耗 token。3.4 沉浸式阅读器边生成边读Mermaid 架构图原生渲染AiReadCode 提供双模式阅读器可以在书籍工作区内阅读也可以独立新开一个 Tauri 沉浸式窗口。生成过程中每 3 秒增量同步刷新你可以边生成边读。正文原生支持 Mermaid 架构图例如响应式系统的依赖收集流程渲染错误:Mermaid 渲染失败: Parse error on line 2: ...raph TD A[reactive(target)] -- B[crea ----------------------^ Expecting SQE, DOUBLECIRCLEEND, PE, -), STADIUMEND, SUBROUTINEEND, PIPE, CYLINDEREND, DIAMOND_STOP, TAGEND, TRAPEND, INVTRAPEND, UNICODE_TEXT, TEXT, TAGSTART, got PS四、实战用 AiReadCode 读透 Vue3 响应式内核以《Vue core 仓库工程化解读》为例这本书共 14 章覆盖 Monorepo 架构、SFC 编译、Tree-shaking、release.js 自动化等。其中“响应式系统”一章的阅读路径如下第 1 节从reactive入口看 Proxy 的创建→ 锚点reactive.ts:42-58第 2 节createGetter中的依赖收集→ 锚点baseHandlers.ts:30-39第 3 节track与Dep的双向链表→ 锚点effect.ts:150-161第 4 节trigger如何调度effect→ 锚点effect.ts:220-280第 5 节computed的惰性求值与缓存→ 锚点computed.ts:40-120。每一节都带有精确的行号锚点点击即可在SourceCodeViewer中查看真实源码并高亮。你不再需要记住“那个函数在哪个文件”书籍的结构就是你的阅读路径。五、反 Cursor 生态位读代码 vs 写代码AiReadCode 的定位不是另一个 Cursor而是“反 Cursor”赛道的开拓者。它的哲学是AI 不只是回答代码的问题而是告诉你下一步应该读什么。Cursor 解决的是“写”的效率AiReadCode 解决的是“读”的导航问题。当 AI 帮写的代码越来越庞大开发者对架构级理解工具的需求就越强烈。卖源码书不卖软件客户端——官网提供第 1 章在线阅读你可以先体验 FACT 行号和真实源码对照再决定是否下载桌面客户端扫描自己的私有项目。六、总结与体验引导AI 写代码的时代代码库的复杂度正在指数级膨胀。传统的“断点 零散问 AI”阅读方式已经无法应对 Monorepo 级别的架构理解需求。AiReadCode 通过Tauri Rust 本地解析、FACT 行号对齐、全书 Pipeline、沉浸式阅读器把陌生代码库变成一本可读、可跳转、可检索的书。如果你正在被 Vue3 的响应式源码、vLLM 的 PagedAttention 或 Tokio 的 Work-Stealing 算法折磨不妨去 AiReadCode 官网 试读《Vue core 仓库工程化解读》第 1 章。把陌生代码库读成一本书。这可能是 AI 时代开发者最值得拥有的阅读范式。