微前端跑在生产环境第三年我摸透了它的真实边界

上周和三个做前端的老同事吃饭,半杯冰啤酒下去,所有人都在骂当年拍板上微前端的那个技术负责人。

不是东西不好。是当初吹得太神,现在擦屁股的活全落到了一线的人身上。

当初选它的根本原因从来不是技术先进

2019年前后大家都在碰到同一个问题——一个后台管理系统,迭代了快五年,代码量破两百万行,改个按钮的颜色要全量回归测试,三个前端小组各管一摊,提交代码的冲突每天要花俩小时解决。

当时有人抛出微前端的概念,说把不同小组负责的模块拆成独立的应用,各自部署,互不影响。

说白了就是把大仓库拆成小仓库,每个小应用自己跑自己的,最后在主框架里拼起来。

没人当时想过什么”技术架构升级”的宏大叙事,大家只是想把每天改代码的痛苦先解决掉。

微前端主框架子应用加载流程示意图
微前端主框架子应用加载流程示意图


你试过在一个全量打包需要40分钟的项目里等构建吗?等咖啡都凉透了,构建进度条还卡在70%。拆成微应用之后,每个子应用构建最多8分钟,提交代码之后甚至能在茶水间接完一杯水,CI就跑完了。

这个收益是实打实的,没人会否认。

爽是真的爽过。

没人提前算过的隐性成本

麻烦在于,大家一开始只算了”构建快了多少”的账,没算后面要填的坑。

首先是公共依赖的版本冲突。

你主框架里用的是React 18,某个三年前写的老模块还停留在React 16,本来单仓库的时候统一升版本就行,现在两个应用跑在同一个浏览器页面里,两个版本的React同时加载,直接把页面搞白屏。

有人说那把老模块升了不就行了?

行啊。那个模块是三年前离职的同事写的,当时留的文档只有半页,测试同学根本不敢动,一改就出线上bug,光升级的成本够写三个新模块了。

还有样式隔离的落地难问题。一开始大家觉得用Shadow DOM不就解决了?真到落地才发现,组件库的弹窗是挂在body下面的,Shadow DOM根本拦不住;还有全局的CSS变量,你改了主框架的主题色,所有子应用的按钮颜色全跟着变,想调都调不了。

最烦的是跨应用路由与参数传递的兼容成本。子应用之间互相跳的时候,要传个参数,一开始大家写了一堆全局事件监听,三个月之后没人记得哪个事件是哪个模块发的,改个跳转逻辑能触发三个无关页面的bug。

微前端跨应用样式隔离方案对比图
微前端跨应用样式隔离方案对比图


我见过最离谱的一个团队,为了解决这些问题,专门招了两个前端,啥业务都不做,就天天维护微前端的主框架。这成本,当初立项的时候根本没人算进去。

这事说穿了,就是你以为买了个能帮你省时间的扫地机器人,结果最后你每天要花更多时间给机器人清缠在滚轮上的头发。

现在大家慢慢摸出来的真实适用边界

跑了这三年,现在没人会说微前端是银弹,也没人会直接把它骂得一文不值。

我们现在内部定的规矩是:只有满足两个条件的项目,才允许上微前端。

第一,系统模块由完全独立的跨团队维护,互相之间的代码交集很少,甚至可能是不同部门的人在写。比如公司的门户站,市场部管活动页,运营部管用户中心,技术部管后台框架,这种情况拆成微应用,大家各自发版,确实不会互相卡上线时间。

第二,系统包含无法快速重写的长期遗留老模块,实在不想重写,但是又要和新模块拼在同一个页面里。微前端刚好能当那个”胶水层”,不用动老代码,直接嵌进来就行。

除此之外的所有情况,比如一个小团队从头到尾维护的一个中型项目,总共就几万行代码,凑什么热闹上微前端?

有人说那如果以后团队扩张了,系统变大了怎么办?

等真的变大了再拆也来得及。先把单仓库的代码写规范,模块边界划清楚,真到要拆的时候,半天就能迁完。反过来一开始就为了”未来可能的扩张”提前上微前端,你现在就要扛所有的隐性成本,根本不划算。

哦对,还有个之前没人提的好处。去年公司把两个完全独立的业务线合并,本来以为要花三个月把两个系统的代码揉到一起,结果因为两边早就各自用了微前端的框架,直接把对方的子应用注册到主框架里,一周就把合并后的页面上线了。

这个场景是当初选技术方案的时候,谁都没预料到的。

上周那个和我一起吃饭的老同事,他们团队今年终于把之前硬上的微前端拆了一半,只留了两个跨部门的老模块挂在主框架上。

他说现在每天的构建时间从原来的20分钟降到了3分钟,终于不用在等CI的时候摸鱼刷短视频了。

技术方案哪有什么绝对的好与坏。

你用它解决了你当下最痛的那个问题,就算值。

要是为了追概念,硬把它套在根本不需要的场景里,最后肯定要为当初的冲动买单。
免责声明:市场有风险,选择需谨慎!此文仅供参考,不作买卖依据。如有侵权请联系删除。
文章名称:微前端跑在生产环境第三年我摸透了它的真实边界
文章链接:https://m.itcdj.com/it/112.html