满足以下几点,确实可能需要微前端
- 系统本身是需要集成和被集成的
- 旧的系统不能下,新的需求还在来
- 你的系统需要有一套支持动态插拔的机制接入应用
- 系统中的部件具备足够清晰的服务边界
满足以下几点,你可能不需要微前端
- 你/你的团队具备系统内所有架构组件的话语权
- 你/你的团队有足够动力去治理、改造这个系统中的所有组件
- 系统及组织架构上,各部件之间本身就是强耦合、自洽、不可分离的
- 极高的产品体验要求,对任何产品交互上的不一致零容忍
微前端的价值
- 解决产品侧的扩展性和组合性。化整为零,自由组合。
- 解决能力输出的「最后一公里」。
- 云生态中的「新物种」 — 微应用。
微前端组成部分
- 微前端的基础设施。这是目前讨论得最多的,一个微应用如何通过一个组件基座加载进来、脚手架工具、怎么单独构建和部署、怎么联调。
- 微前端配置中心:标准化的配置文件格式,支持灰度、回滚、红蓝、A/B 等发布策略。
- 微前端的可观察性工具:对于任何分布式特点的架构,线上/线下治理都很重要。
微前端具体要解决好以下问题:
- 微应用的注册、异步加载和生命周期管理;
- 微应用之间、主从之间的消息机制;
- 微应用之间的安全隔离措施;
- 微应用的框架无关、版本无关;
- 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理;
- 微应用独立调试、和主应用联调的方式,快速定位报错(发射问题);
- 微应用的发布流程;
- 微应用打包优化问题;
- 微应用专有云场景的出包方案;
- 渐进式升级:用微应用方案平滑重构老项目。
探索微前端的场景极限
基础场景
与路由绑定的方式渲染微应用
- 由于URL/路由的 唯一性/排他性 的特点,这种方式只适用单实例场景需求
- 微应用的调度都是由路由系统来自动处理的,无法满足更复杂的需求,如同一个路由下,根据不同的用户权限展示不同的微应用这类个性化诉求,需要写一些中间层代码来曲线救国
- 应用挂载的容器节点等需提前准备好,不然碰到 动态/嵌套 路由这类情况,可能会因为路由 listener 监听触发的时序不确定,导致微应用无法完成挂载的问题
以组件的方式使用微应用
- 这类方式适用于一些可共用的、带业务逻辑的服务型组件(类似于我们以前常说的端对端组件):比如带聊天交互的客服机器人、带引导功能的 intro 服务等
- 这类微应用必须是不带路由系统的 widget 类型,不然也会出现多实例时路由冲突的问题
嵌套渲染场景
- 需要确保被加载的微应用是不含自己的路由系统,否则会出现多个应用间路由系统互相 抢占/冲突 的情况
- 需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。react-router 的
memory history模式很好的解决了这一问题
极限渲染场景
将同一个应用的不同页面,同时渲染到主应用的不同 UI 容器中这个需求下,有几个比较特殊的问题需要去考虑:
- 是否需要特殊的微应用生产方式
- 多路由系统共存带来的 冲突/抢占 问题
- 不同微应用间的样式隔离
- 如何优化渲染性能:既然每一个微应用实例实际对应的是同一个应用,那我们如何尽可能多的复用一些运行时或者沙箱,从而降低这么多微应用同时渲染代理的运行时开销
更多使用场景
- npm 包分发业务组件
- 新的 UI 共享模式
- 站点即配置
- 产品上的想象空间