Meta Description： 深入解析 Feature First 架构为什么越来越受欢迎，从目录设计、团队协作、代码维护、领域划分等多个角度，分析大型 Vue 和 React 项目如何组织代码。

Slug： feature-first-architecture

前言

随着 Vue3、React 和现代前端工程的发展，一个问题越来越突出：

项目越来越大，但目录越来越乱。

很多团队刚开始时，一个 src 目录只有几十个文件。

几个月后，就变成了：

• components
• pages
• hooks
• api
• utils
• services
• stores
• constants
• types
• styles
• composables

每个目录都有几百个文件。

开发者每天花费大量时间寻找代码，而不是编写代码。

于是越来越多团队开始采用 Feature First（按业务组织） 的架构方式。

什么是 Feature First？

传统项目通常按技术类型划分目录：

src
├── api
├── components
├── hooks
├── pages
├── stores
├── utils
└── types

这种方式在项目初期非常简单。

但随着业务增加，一个用户模块可能需要：

• API
• Store
• Types
• Components
• Hooks
• Utils

这些文件被拆散到不同目录。

开发一个功能，需要不停切换文件夹。

Feature First 则完全不同。

它按照业务模块组织：

src
├── features
│   ├── auth
│   ├── user
│   ├── order
│   └── dashboard
├── shared
├── router
└── app

每个 Feature 都拥有自己的组件、接口、状态和类型。

开发者只需要进入对应模块即可。

为什么越来越多团队开始迁移？

真正推动 Feature First 的不是框架，而是团队规模。

当项目超过：

• 20 个页面
• 10 万行代码
• 5 名以上开发人员

传统目录开始出现几个明显问题。

1. 查找成本越来越高

例如修改订单详情。

传统目录需要：

pages
↓

components

↓

api

↓

types

↓

stores

需要不断切换。

Feature First：

features/order

基本可以找到所有相关代码。

2. 业务边界越来越清晰

一个订单模块：

应该只关心订单。

而不是依赖几十个公共目录。

例如：

features
└── order
    ├── api
    ├── components
    ├── hooks
    ├── store
    ├── types
    └── utils

整个模块可以独立维护。

以后拆微前端、拆 npm 包都会容易很多。

3. 更适合多人协作

多人开发最大的成本不是写代码。

而是：

合并代码。

解决冲突。

理解别人代码。

Feature First 可以明显降低不同业务之间的相互影响。

订单团队基本不会修改用户目录。

用户团队也不会频繁进入支付模块。

Git 冲突自然减少。

Shared 应该放什么？

很多团队最大的误区是：

什么都往 Shared 放。

正确做法应该是：

真正跨业务使用的资源才放 Shared。

例如：

• Button
• Modal
• Toast
• Request
• Theme
• Config

如果一个组件只在订单模块使用。

它就属于：

features/order/components

而不是：

shared/components

Shared 越大。

说明业务划分越失败。

Feature First 并不是万能的

对于：

• 小型官网
• Landing Page
• 十几个页面以内的小项目

传统目录仍然很好。

因为业务太少。

Feature First 的目录层级反而增加了理解成本。

因此是否采用 Feature First，应该根据项目规模决定。

最佳实践

对于 Vue3 或 React 企业项目，推荐采用下面结构：

src
├── app
├── features
├── shared
├── router
├── assets
└── main.ts

其中：

• app：应用入口
• features：业务模块
• shared：公共资源
• router：路由
• assets：静态资源

这样的结构能够很好地支撑长期迭代。

总结

Feature First 的核心思想并不是换一种目录，而是：

让代码围绕业务组织，而不是围绕技术组织。

对于中大型项目，它能够显著提升：

• 可维护性
• 可扩展性
• 团队协作效率
• 新成员上手速度

未来无论是 Vue、React，还是 AI 辅助开发，Feature First 都会越来越成为主流选择。