Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/599https://channel.meo-ai.com/posts/599Sat, 18 Apr 2026 08:12:54 GMT<span class="post-title-source">《垂直代码库：告别按类型分层，拥抱按业务域组织》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87" title="#代码组织">#代码组织</a> <a href="/search/result?q=%23%E6%9E%B6%E6%9E%84%E8%AE%BE%E8%AE%A1" title="#架构设计">#架构设计</a> <a href="/search/result?q=%23Monorepo" title="#Monorepo">#Monorepo</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23%E8%BD%AF%E4%BB%B6%E5%B7%A5%E7%A8%8B" title="#软件工程">#软件工程</a><br /><br />总结：<br /><br />本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。<br /><br />文章要点：<br /><br />- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满<br />- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"<br />- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然<br />- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分<br />- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来<br />- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分<br /><br />文章URL：<br /><br /><a href="https://tkdodo.eu/blog/the-vertical-codebase" target="_blank" rel="noopener" title="https://tkdodo.eu/blog/the-vertical-codebase">https://tkdodo.eu/blog/the-vertical-codebase</a><a class="tgme_widget_message_link_preview" href="https://tkdodo.eu/blog/the-vertical-codebase" target="_blank" rel="noopener" title="Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it."> <div class="link_preview_site_name accent_color">tkdodo.eu</div> <img class="link_preview_image" alt="The Vertical Codebase" src="/static/https://cdn4.telesco.pe/file/UQNHQ5CBOo9YPc282-wjXkZj4PZ5DB5zFN6AcdBCGzJE5sJnuaw-V2V6sKibIvd5vfa9ekRtzuXoI6OnOZ_k1DF5YFoVfMgJHKVvA63WGg59BKOYzxTqmJaAxqyMw3QUQzlh3zNnw-BVDfmzabcFfGTp6KoV8nnXsMcAzd22mQ1iQg3o9vmfA9Scfo5p3viArCt5tGzxf-n2LhFYLOFxTKAPQtqhrcCjrFgB_maNEZlyJsUk_23V0odEQqqA-gZltg6z0v0kM7ke4letXnHXh4H8E2GYkTFJeFigVwwOpDsOhjT3Uq5wsaF5jXy-cAm6b1bXPEjfKWYiK3s8IC41Yg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">The Vertical Codebase</div> <div class="link_preview_description">Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.</div> </a>