关于如何使用qiankun,官方文档比较完善,网上文档也较多,所以这里就不再赘述。接下来我们就来看一下目前文档中缺失的部分它是如何工作的。
运行流程
核心API
registerMicroApps
和start
是qiankun两个核心的API。
registerMicroApps
函数的作用是注册子应用,并且在子应用激活时,创建运行沙箱,在不同阶段调用不同的生命周期钩子函数。start
函数负责初始化一些全局设置,然后启动应用。
沙箱
qiankun的沙箱环境可以分为三类,主要通过运行环境是否支持Proxy和是否是单实例进行区分。
LegacySandbox
LegacySandbox用于支持Proxy的单实例环境下,沙箱隔离是通过快照模式实现,在激活沙箱时还原子应用状态,卸载时还原主应用状态(子应用挂载前的全局状态)实现的。
- 当调用
set
向子应用proxy/window
对象设置属性时,所有的属性设置和更新都会先记录在addedPropsMapInSandbox
或modifiedPropsOriginalValueMapInSandbox
中,然后统一记录到currentUpdatedPropsValueMap
中。 - 在激活沙箱时,沙箱会通过
currentUpdatedPropsValueMap
查询到子应用的独立状态池(沙箱可能会激活多次,这里是沙箱曾经激活期间被修改的全局变量),然后还原子应用状态。 - 在关闭沙箱时,通过
addedPropsMapInSandbox
删除在沙箱运行期间新增的全局变量,通过modifiedPropsOriginalValueMapInSandbox
还原沙箱运行期间被修改的全局变量,从而还原到子应用挂载前的状态。
该方案使用diff算法还原window状态快照,因为使用的是同一个window,所以不能在多实例时使用,而且父子应用之间window对象还是会存在污染。
ProxySandbox
ProxySandbox用于支持Proxy的多实例环境下,它利用Proxy实现对微应用全局对象操作的拦截,子应用对全局属性的操作就是对该 proxy
对象属性的操作。
- 当调用
set
向子应用proxy/window
对象设置属性时,所有的属性设置和更新都会命中updateValueMap
,存储在updateValueMap
集合中,从而避免对window
对象产生影响。 - 当调用
get
从子应用proxy/window
对象取值时,会优先从子应用的沙箱状态池updateValueMap
中取值,如果没有命中才从主应用的window
对象中取值。
ProxySandbox
是最完备的沙箱模式,完全隔离了对 window
对象的操作,在浏览器对Proxy兼容性兼容的情况下,算是最优的方案。
SnapshotSandbox
在浏览器不支持Proxy时,会回退到SnapshotSandbox沙箱,作为兜底方案。
- 在沙箱激活时,会先给当前
window
对象打一个快照,记录沙箱激活前的状态。打完快照后,函数内部将window
状态通过modifyPropsMap
记录还原到上次的沙箱运行环境,也就是还原沙箱激活期间(历史记录)修改过的window
属性。 - 在沙箱关闭时,调用
inactive
函数,在沙箱关闭前通过遍历比较每一个属性,将被改变的window
对象属性值记录在modifyPropsMap
集合中。在记录了modifyPropsMap
后,将window
对象通过快照windowSnapshot
还原到被沙箱激活前的状态,相当于是将子应用运行期间对window
造成的污染全部清除。
作为兜底方案,相比较 ProxySandbox
而言,在子应用激活期间,SnapshotSandbox
将会对 window
对象造成污染。
以上就是qiankun一些比较关键的东西,接下来就分享一下在使用的过程中需要关注的一些问题。