微前端深度解析:场景化实践与架构极限突破

103 阅读4分钟

满足以下几点,确实可能需要微前端

  • 系统本身是需要集成和被集成的
    • 旧的系统不能下,新的需求还在来
    • 你的系统需要有一套支持动态插拔的机制接入应用
  • 系统中的部件具备足够清晰的服务边界

满足以下几点,你可能不需要微前端

  • 你/你的团队具备系统内所有架构组件的话语权
  • 你/你的团队有足够动力去治理、改造这个系统中的所有组件
  • 系统及组织架构上,各部件之间本身就是强耦合、自洽、不可分离的
  • 极高的产品体验要求,对任何产品交互上的不一致零容忍

微前端的价值

  • 解决产品侧的扩展性和组合性。化整为零,自由组合。
  • 解决能力输出的「最后一公里」。
  • 云生态中的「新物种」 — 微应用。

微前端组成部分

  • 微前端的基础设施。这是目前讨论得最多的,一个微应用如何通过一个组件基座加载进来、脚手架工具、怎么单独构建和部署、怎么联调。
  • 微前端配置中心:标准化的配置文件格式,支持灰度、回滚、红蓝、A/B 等发布策略。
  • 微前端的可观察性工具:对于任何分布式特点的架构,线上/线下治理都很重要。

image.png

image.png

image.png

微前端具体要解决好以下问题:

  • 微应用的注册、异步加载和生命周期管理;
  • 微应用之间、主从之间的消息机制;
  • 微应用之间的安全隔离措施;
  • 微应用的框架无关、版本无关;
  • 微应用之间、主从之间的公共依赖的库、业务逻辑(utils)以及版本怎么管理;
  • 微应用独立调试、和主应用联调的方式,快速定位报错(发射问题);
  • 微应用的发布流程;
  • 微应用打包优化问题;
  • 微应用专有云场景的出包方案;
  • 渐进式升级:用微应用方案平滑重构老项目。

探索微前端的场景极限

基础场景

与路由绑定的方式渲染微应用

  1. 由于URL/路由的 唯一性/排他性 的特点,这种方式只适用单实例场景需求
  2. 微应用的调度都是由路由系统来自动处理的,无法满足更复杂的需求,如同一个路由下,根据不同的用户权限展示不同的微应用这类个性化诉求,需要写一些中间层代码来曲线救国
  3. 应用挂载的容器节点等需提前准备好,不然碰到 动态/嵌套 路由这类情况,可能会因为路由 listener 监听触发的时序不确定,导致微应用无法完成挂载的问题

以组件的方式使用微应用

  • 这类方式适用于一些可共用的、带业务逻辑的服务型组件(类似于我们以前常说的端对端组件):比如带聊天交互的客服机器人、带引导功能的 intro 服务等
  • 这类微应用必须是不带路由系统的 widget 类型,不然也会出现多实例时路由冲突的问题

嵌套渲染场景

  • 需要确保被加载的微应用是不含自己的路由系统,否则会出现多个应用间路由系统互相 抢占/冲突 的情况
  • 需要确保微应用的路由系统不会干扰到全局的 URL 系统即可。react-router 的 memory history 模式很好的解决了这一问题

极限渲染场景

将同一个应用的不同页面,同时渲染到主应用的不同 UI 容器中这个需求下,有几个比较特殊的问题需要去考虑:

  1. 是否需要特殊的微应用生产方式
  2. 多路由系统共存带来的 冲突/抢占 问题
  3. 不同微应用间的样式隔离
  4. 如何优化渲染性能:既然每一个微应用实例实际对应的是同一个应用,那我们如何尽可能多的复用一些运行时或者沙箱,从而降低这么多微应用同时渲染代理的运行时开销

更多使用场景

  • npm 包分发业务组件
  • 新的 UI 共享模式
  • 站点即配置
  • 产品上的想象空间

参考

拥抱云时代的前端开发架构——微前端

你可能并不需要微前端 - 知乎

探索微前端的场景极限 - 知乎