先说乾坤(qiankun)吧,这应该是国内最火的方案了。基于Single-SPA封装,最大的优势就是开箱即用。上次我们接那个jQuery老项目,直接配置个entry就能跑起来,生命周期都不用管。不过它的沙箱机制有点坑,特别是CSS隔离那块,虽然用了Shadow DOM,但遇到些UI库还是会样式泄露。记得有次加载Antd子应用,主站的按钮突然变大了,排查半天是样式污染。性能方面,应用多了之后每个子应用都是独立打包,资源重复加载问题明显,尤其moment.js这种库每个应用都带一份。
Module Federation(模块联邦)算是webpack5的王牌功能了。它玩的是模块共享,子应用把组件暴露出去,主应用按需加载。我们测试过把React和工具库抽成remote,子应用确实瘦身不少。但这对团队协作要求很高,接口约定必须严格,版本管理要到位。上次A组改了组件接口没通知B组,直接导致生产环境白屏。而且这方案对webpack依赖太重,要是团队用vite的就有点尴尬。
Single-SPA属于元老级框架,概念很纯粹------生命周期调度器。它要求每个子应用导出bootstrap、mount、unmount三个方法,自由度确实高,什么技术栈都能接。但我们实测发现上手成本太高,路由拦截、资源加载全要自己实现,新手容易踩坑。适合基础架构团队做二次封装,业务团队直接用的话效率偏低。
无界方案是腾讯开源的,主打Web Components沙箱。它的DOM隔离做得确实漂亮,子应用直接渲染到Web Components里,样式事件完全隔离。我们试过在同一页面同时运行Vue3和React18子应用,互不干扰。不过浏览器兼容性要考虑,而且社区生态相对小众,遇到问题排查起来费劲。
EMP框架的思路更激进,主打去中心化。它扩展了Module Federation,支持跨应用状态共享。测试时发现它的TypeScript支持很到位,代码提示比原生MF更友好。但调试比较麻烦,特别是多个应用相互依赖时,报错信息不太直观。
最后提下阿里开源的Garfish,整体设计类似qiankun但更轻量。它的预加载功能很实用,能够根据路由规则提前加载子应用资源。我们测过从点击导航到页面渲染,预加载能节省300ms左右。不过文档有些地方写得简略,需要看源码才能理解实现原理。
综合来看,技术选型还是要看具体场景:老项目改造推荐qiankun,模块复用需求强烈的选Module Federation,大型平台建议基于Single-SPA自研框架,追求极致隔离的考虑无界。我们团队最终选择了qiankun+Module Federation混合方案------基础平台用qiankun接入历史项目,新业务用MF实现模块共享,算是兼顾了稳定性和先进性。
其实微前端没有银弹,关键想清楚为什么要用。如果就三五个页面,真没必要上微前端,反而增加复杂度。但当你们团队超过20人,同时维护多个技术栈项目时,微前端带来的独立部署、技术栈无关等优势才会真正体现。建议先拿非核心业务试水,别一上来就全盘改造,踩坑了也好回滚。