【玩转微前端2】聊聊qiankun

2022/04/07 posted in  微前端
Tags:  #微前端 #qiankun

关于如何使用qiankun,官方文档比较完善,网上文档也较多,所以这里就不再赘述。接下来我们就来看一下目前文档中缺失的部分它是如何工作的

image.png
image.png

运行流程

qiankun
qiankun

核心API

registerMicroAppsstart是qiankun两个核心的API。

registerMicroApps 函数的作用是注册子应用,并且在子应用激活时,创建运行沙箱,在不同阶段调用不同的生命周期钩子函数。start 函数负责初始化一些全局设置,然后启动应用。

qiankun
qiankun

沙箱

qiankun的沙箱环境可以分为三类,主要通过运行环境是否支持Proxy和是否是单实例进行区分。

qiankun
qiankun

LegacySandbox

LegacySandbox用于支持Proxy的单实例环境下,沙箱隔离是通过快照模式实现,在激活沙箱时还原子应用状态,卸载时还原主应用状态(子应用挂载前的全局状态)实现的。

qiankun
qiankun

  • 当调用 set 向子应用 proxy/window 对象设置属性时,所有的属性设置和更新都会先记录在 addedPropsMapInSandboxmodifiedPropsOriginalValueMapInSandbox 中,然后统一记录到 currentUpdatedPropsValueMap 中。
  • 在激活沙箱时,沙箱会通过 currentUpdatedPropsValueMap 查询到子应用的独立状态池(沙箱可能会激活多次,这里是沙箱曾经激活期间被修改的全局变量),然后还原子应用状态。
  • 在关闭沙箱时,通过 addedPropsMapInSandbox 删除在沙箱运行期间新增的全局变量,通过 modifiedPropsOriginalValueMapInSandbox 还原沙箱运行期间被修改的全局变量,从而还原到子应用挂载前的状态。

该方案使用diff算法还原window状态快照,因为使用的是同一个window,所以不能在多实例时使用,而且父子应用之间window对象还是会存在污染。

ProxySandbox

ProxySandbox用于支持Proxy的多实例环境下,它利用Proxy实现对微应用全局对象操作的拦截,子应用对全局属性的操作就是对该 proxy 对象属性的操作。

qiankun
qiankun

  • 当调用 set 向子应用 proxy/window 对象设置属性时,所有的属性设置和更新都会命中 updateValueMap,存储在 updateValueMap 集合中,从而避免对 window 对象产生影响。
  • 当调用 get 从子应用 proxy/window 对象取值时,会优先从子应用的沙箱状态池 updateValueMap 中取值,如果没有命中才从主应用的 window 对象中取值。

ProxySandbox 是最完备的沙箱模式,完全隔离了对 window 对象的操作,在浏览器对Proxy兼容性兼容的情况下,算是最优的方案。

SnapshotSandbox

在浏览器不支持Proxy时,会回退到SnapshotSandbox沙箱,作为兜底方案。

qiankun
qiankun

  • 在沙箱激活时,会先给当前 window 对象打一个快照,记录沙箱激活前的状态。打完快照后,函数内部将 window 状态通过 modifyPropsMap 记录还原到上次的沙箱运行环境,也就是还原沙箱激活期间(历史记录)修改过的 window 属性。
  • 在沙箱关闭时,调用 inactive 函数,在沙箱关闭前通过遍历比较每一个属性,将被改变的 window 对象属性值记录在 modifyPropsMap 集合中。在记录了 modifyPropsMap 后,将 window 对象通过快照 windowSnapshot 还原到被沙箱激活前的状态,相当于是将子应用运行期间对 window 造成的污染全部清除。

作为兜底方案,相比较 ProxySandbox 而言,在子应用激活期间,SnapshotSandbox 将会对 window 对象造成污染。

以上就是qiankun一些比较关键的东西,接下来就分享一下在使用的过程中需要关注的一些问题。

« 【玩转微前端3】需要关注的问题 【玩转微前端1】如何做技术选型 »