前端提效新思路：AI 时代别什么都抽组件，按模块手搓更高效

前端提效新思路：AI 时代别什么都抽组件，按模块手搓更高效

文章首发于博客园 · 探长78

最近在做 AI 提效前端的时候，团队里反复在争论一个问题：到底要不要把所有东西都做成组件？

传统的答案是"要"——组件化是前端框架的底层哲学，是工程化的标志，是对代码洁癖的奖赏。但在 AI 大规模写代码的今天，我越来越觉得：组件化是面向"人肉维护"时代的设计，AI 提效时一味抽组件，反而是在帮倒忙。

这篇文章聊聊我的真实思考和判断标准。

先说结论

1. 组件化只有在多页面高频复用时才划算，一次性业务页强抽组件是"为了抽象而抽象"。

2. AI 写代码的瓶颈是"理解成本"而不是"重复劳动"，手搓模块正好打在这个点上。

3. 正确的姿势是混合：业务页主体手搓，只保留真正的设计 token 和极少数高频复用件。

组件化真正省的是什么

组件化的本质，是在回答一个问题：这段代码我要不要写第二遍？

一个表格、一个筛选栏、一个表单，如果全站 10 个页面都在用，抽成公共组件省的是后续每一处的维护成本——人只要改一处，全线生效。

但这里有个前提：这些页面的结构和数据模型得大致统一。否则就会出现最经典的噩梦——组件参数爆炸：

为了兼容 10 种不同的表单，你给组件加了 20 个 props、5 个 slot、3 个 emit。写的时候很"优雅"，用的时候没人看得懂，AI 更是每次都要通读一遍契约才能动手——抽象的成本反而超过了复用的收益。

为什么 AI 时代"手搓"越来越对

组件化是给"人肉改代码"时代准备的：人改一遍 10 处重复代码太累，所以抽公共。但 AI 写代码是"每次从头生成一份完整实现"，它不累。

这时候对比就反转了。我先列一个维度对比：

人类重复劳动

组件化：省。手搓：无感（AI 代劳）。

AI 的理解成本

组件化：高（读契约、对齐接口）。手搓：低（照着需求直接写）。

上下文消耗

组件化：大。手搓：小。

出错率

组件化：高（绑定抽象接口出错）。手搓：低（一次成型）。

适用场景

组件化：人维护的长期项目。手搓：AI 驱动的快速交付。

组件化省的是"人的劳动"，手搓省的是"AI 的理解成本"。而在 AI 时代，后者才是真正的瓶颈。

什么样的该手搓，什么样的该复用

我的判断标准很简单，看两方面：复用频率 和 结构一致性。

直接手搓

• 业务页面主体：表单、表格、流程页（如订单、库存、设备归还这类页面），布局各异、复用率极低，AI 一次生成最划算。
• 营销落地页、一次性展示页：只为一个活动/一次投放存在，抽组件纯属浪费。
• 特有交互：某个页面独有的拖拽、画布、特殊布局，做成全局组件反而污染项目。

保守复用（真正值得留的）

• 设计 token：颜色变量、间距、圆角、字体、阴影——这些是"设计语言"，不是组件，值得抽成全局样式 / 主题配置，全站统一。
• 极少数高频骨架件：如果 80% 页面真在用一个东西（比如同一个导航栏、同一个分页表格），才值得抽。
• 布局框架：整体的页面骨架、路由结构。

别硬套的

• 为了"规范"逼 AI 拆一堆没人复用的组件——这是最常见的伪需求。表面工程化，实际每行都成了维护负担。

一个真实案例

我手头有个企业级的前端项目，里面有 Redelivery（设备归还）、Depot Inventory（堆场库存）、Booking Order（订舱）、Equipment（设备查询）等独立业务页。

每个页面的数据模型都不一样——归还单、库存表、订舱单、设备台账，字段完全不同。如果按传统思路硬抽一个"通用数据表格组件 + 通用筛选组件 + 通用表单组件"，会发生什么？

• props / slot / emit 数量爆炸，接口复杂到没人敢动；
• AI 每次改需求都要先花大量上下文读组件契约；
• 某次需求变了，组件为了兼容所有页面，改动牵一发动全身。

我的处理方式很简单：每个业务页让 AI 按需求直接手搓完整实现，风格统一靠设计 token 保证，不做页面间冗余抽取。结果：交付速度快，需求变更局部化，AI 上下文消耗小，几乎不出"抽象接口"层面的错。

真正沉淀下来的，只有一套设计 token 和极少数全站通用件。

什么时候组件化仍然是对的

别误会，我不是说组件化没用。它仍然对的场景：

• 产品形态稳定、多人长期维护的项目，组件化带来的可维护性仍值钱；
• 同一个核心业务件确实在 5 个以上页面复用，且数据结构稳定；
• 你要做组件库 / 设计系统给别人用（这是组件化的主场）。

关键区别在于：为"复用"而抽，有价值；为"规范"而抽，是负担。

总结

• 组件化是前端框架的惯性思维，面向人维护；
• AI 提效时，瓶颈是 AI 的理解成本，不是人的重复劳动；
• 所以：业务页按模块手搓，只保留真正的设计 token 和极少数高频复用件。

以后写前端，先问一句：这玩意儿真会被复用第二次吗？ 如果答案是不确定，那就让 AI 手搓，别抽。