AI Agent 时代前端目录怎么分：按页面纵向切块，单次改代码读文件从8个降到3个

事件核心：发生了什么

原文给出的方案是“垂直切片”（vertical slice / feature-based）：一个 URL 对应一个页面目录，页面结构、页面 CSS、页面 JS 和测试全部同置，页面之间禁止互相 import；跨页共享层只允许三类内容——API 服务层、通用主题样式、全局消息提示，路由表单独集中维护。作者以“取消订单按钮无响应”为例，指出横向分层下排查要横跨 routes、components、hooks、api、styles 五个目录，而新结构只需看本页文件加一个共享 API 文件。

为什么重要

关键前提是修改者变了。人靠记忆和 IDE 跳转理解仓库；AI Agent 只能读进上下文窗口才算“知道”，所以文件散落在哪，从导航问题变成成本问题。作者按 20 个页面、每页 5 个相关文件、单文件约 1200 token 估算，单次读取从约 9600 token 降至约 3600 token，降幅约 62.5%。他也承认代码总量短期会涨约 30%，但认为 AI 按单次读入量计费，而非按仓库总行数。

对用户/开发者/创作者的影响

对前端开发者，这一思路意味着重构项目目录时要优先考虑 AI 编程工具能否快速定位上下文，而非复用率。共享层用“三次法则”控制：第一次直接写，第二次复制，第三次再抽象。作者也提醒最容易出问题的地方是共享层被随意扩大，半年后又长出新的 utils/。目前公开信息显示，这是作者基于经验给出的方法建议和估算，并非可验证的产品功能或标准化工具。

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。

值得关注的后续

一是这套目录约定是否被主流脚手架或 AI 编程工具默认支持；二是 62.5% 的降幅在真实多页面项目中能否复现；三是 Claude Code、Cursor 等工具的上下文策略若继续优化，纵向切块的收益是否会被削弱。

来源：juejin