微前端退烧

微前端退烧

前几年,微前端几乎是前端架构的标配答案。

不管什么项目,只要有人说“我们系统比较复杂”,下面就有人接一句“上微前端吧”。qiankun 的 star 一路飙升,Module Federation 出来之后更是一波热潮。技术社区里的文章,十篇有八篇在讲怎么拆、怎么独立部署、怎么技术栈共存。

到了现在,风向开始变了。

不是说微前端不好。而是越来越多团队开始承认:当初上微前端,可能是个错误。

为什么上微前端

我见过不少团队上微前端的真实理由:

“我们团队人太多了,代码经常冲突,需要拆分。”

“不同业务线要共用一个入口,各管各的。”

“老系统不好重构,用微前端包一层。”

这些理由听起来都合理。但仔细想想,大部分其实可以翻译成一句话:我们的协作方式有问题,想用技术手段来解决

代码冲突多?那是分支策略和 Code Review 的问题。业务线共用入口?路由配置加模块划分就能搞定。老系统不好改?iframe 或者渐进式迁移也行。

这些问题确实存在。但解决它们,不一定需要引入一套新的架构范式。

微前端真正适合什么场景

微前端的黄金场景其实很窄:

一是超大型应用。几十个业务模块,上百人的前端团队,模块之间有明确的业务边界,各自独立演进、独立发版。这种规模下,微前端带来的自治性和发布独立性确实能释放效率。

二是遗留系统迁移。一个 jQuery 时代的老系统要渐进式迁移到 React,用微前端做壳子让新旧共存,这是个务实的过渡方案。

三是并购整合。多个独立产品需要统一入口和用户体验,微前端可以作为集成层。

除了这三种,我觉得大部分团队上微前端都是在给自己找麻烦。

隐性成本比想象中大得多

微前端带来的问题,在选型阶段很少被认真讨论:

子应用之间的通信——看似解耦了,但业务逻辑跨应用时怎么办?全局状态怎么共享?事件总线一旦引入,耦合只是从代码层搬到了运行层,该乱还是乱。

样式隔离——Shadow DOM 有兼容性和交互问题,CSS 命名空间需要全员遵守约定。一旦有人偷懒写了全局样式,污染照样发生。

性能——子应用各自加载运行时、各自初始化。用户切一个页面要等两秒白屏,这在金融场景下是不可接受的。

部署协调——独立部署听起来很美,但子应用之间的接口契约怎么保证?A 团队发了新版,B 团队的子应用还没适配,线上就炸了。

调试——线上出了问题,要判断是哪个子应用的锅。本地开发环境要同时跑好几个子应用,内存占用起飞。

这些不是不能解决。但每一个都需要额外的工程投入。如果你的团队就五六个人,这些成本很可能超过了微前端带来的收益。

大部分团队真正需要的是什么

据我观察,大部分前端团队面临的根本不是“架构太大”的问题,而是代码组织的问题。

Monorepo 加工具链管理(Turbo、Nx、Rush),可以让多团队在同一个仓库里高效协作,同时保持代码的统一性和可维护性。

模块化的目录结构加清晰的领域划分,可以让不同业务线的代码各管各的,不需要引入子应用的概念。

合理的路由设计和懒加载,可以让首屏只加载必要的代码,不需要拆成多个独立应用。

这些方案的复杂度远低于微前端,但能解决 80% 的“我们系统太大了”的焦虑。

说白了,你需要的可能不是架构升级,而是代码整理。

退烧的信号

我已经看到一些信号:

有团队把子应用合并回了单体,理由是“维护成本太高,团队扛不住”。

qiankun 的 issue 区里,生产环境的问题越来越多,很多都是当初选型时没预料到的。

在一些技术社区的讨论里,“微前端改造”开始带上了一点“技术债”的味道——当初为了上而上,现在骑虎难下。

这跟当年的 React Native 有点像。刚出来时号称“学一次到处写”,后来大家发现跨平台的坑比原生开发还多。React Native 没有死,它依然在很多场景下很有价值。但它不再是“默认选择”了。

微前端也会走同一条路。在合适的场景下依然有价值,但不再是什么项目都往里套。

一个判断框架

如果你在纠结要不要上微前端,问自己三个问题:

第一,你的前端团队有没有超过 50 人?

第二,你的应用有没有超过 10 个独立业务模块,且各自独立发布?

第三,你有没有遗留系统必须渐进式迁移?

三个问题如果都是“没有”,那大概率你不需要微前端。Monorepo 加模块化就够了。

如果有“有”,那微前端值得认真评估。但即便如此,也要做好工程投入的预期——它不是一个开箱即用的方案,而是一个需要持续投入维护的架构决策。

技术选型不是追潮

微前端这波潮起潮落,其实反映了一个老问题:技术选型容易被社区热度带节奏。

看到大厂用了、社区热了、文章多了,就觉得“我们是不是也该上了”。但技术选型的核心永远是:我的问题是什么,这个方案是不是解决我这个问题成本最低的方式

不是微前端不行。是大部分项目根本不需要它。

能认清这一点的团队,才算是真正从这波热潮中学到了东西。

You voted 5. Total votes: 5

添加新评论