微前端之qiankun沙箱

843 阅读2分钟

「这是我参与11月更文挑战的第2天,活动详情查看:2021最后一次更文挑战

什么是沙箱:一个独立的环境去运行程序,对主应用不产生影响, 类似虚拟机,每个浏览器的tab页都运行在沙箱中。

在微前端中的作用:隔离作用域,解决变量冲突,框架比如spa就没有实现沙箱隔离

qiankun实现的沙箱主要有三种

前两种是基于Proxy实现的,浏览器不支持Proxy的话会将降低为第三种快照模式

  1. legacySandBox : 核心是操作window 对象,使用三个状态池去保存、还原主子应用的全局变量或者状态

    • addedPropsMapInSandbox :存储子应用运行期间新增的全局变量,卸载子应用时可以对比window对象移除子应用新增的全局变量

    • modifiedPropsOriginalValueMapInSandbox :存储子应用运行期间更改过的全局变量,写在子应用时可以对比window对象去还原更改过的对象

    • currentUpdatedPropsValueMap :存储子应用自身全局变量的更新,切换子应用后还原子应用的状态

      优点:内存友好,缺点:会污染window对象所以不支持多实例

  2. proxySandBox: 用于多实例场景,多实例为主应用同时加载两个或以上子应用,这时不能直接对window进行操作因为可能会产生冲突,所以会劫持window生成一个window副本(fakeWindow) , 在卸载切换子应用时销毁window副本即可不会污染window对象,

    优点: 实现了主子应用的完全隔离, 缺点:需要存储window副本,子应用很多时内存占用不友好

  3. snapshotSandBox

    基于diff实现的快照沙箱:

    • windowSnapshot: 加载子应用时存储window快照

    • modifyPropsMap: 保存子应用运行期间更改过的全局变量,加载、卸载子应用时还原子应用状态跟window对象

      优点:浏览器兼容性好,缺点:不支持多实例

其余还有基于iframe的沙箱实现思路:

因为iframe本身是一个封闭的沙箱环境,所以可以基于iframe对象的contentWindow实现主子应用的环境隔离,再通过proxy实现共享的全局变量

优点:多实例、避免污染window、路由隔离,缺点:通信只能通过postMessage、异步

Refence:

解密微前端:从qiankun看沙箱隔离

说说微前端JS沙箱实现的几种方式

沙箱是什么,怎样做一个js沙箱?