目录
iframe
iframe大家都很熟悉,通过iframe实现的话就是每个子应用通过iframe标签嵌入到父应用中,iframe具有天然的隔离属性,各个子应用之间以及子应用和父应用之间都可以做到互不影响。
当然它也是有缺点的:
- url不同步,如果页面刷新,iframe中的页面的路由会丢失。
- 全局上下文完全隔离,内存变量不共享。
- UI不同步,比如iframe中的页面如果有带遮罩晨的弹窗组件,则遮罩就不能覆盖整个浏览器,只能在iframe中生效。
- 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
single-spa
中文网址:https://zh-hans.single-spa.js.org/docs/getting-started-overview/
single-spa是最早的微前端框架,可以兼容很多技术栈。single-spa首先在基座中注册所有的子应用的路由,当url改变时就会去进行匹配,匹配到哪一个子应用就会去加载对应的那个子应用。
相对于iframe的实现方案,single-spa中基座和各个子应用之间共享着一个全局上下文,并且不存在url不同步和UI不同步的情况。
缺点:
- 没有实现js隔离和css隔离。
- 需要修改大量的配置,包括基座和子应用的,不能开箱即用。
qiankun
qiankun是阿里开源的一个为前端的框架,在阿里内部已经存在过一批上线应用的充分检验及打磨了。
优势:
- 基于single-spa封装的,提供了更加开箱即用的API。
- 技术栈无关,任意技术栈的应用均可使用/接入,不论是React/Vue/Angular/JQuery还是等其他框架。
- HTML Entry的接入方式,像使用iframe一样简单。
- 实现了single-spa不具备的样式隔离和js隔离。
- 资源预加载,在浏览器空闲时间预加载未打开的微应用资源,加速微应用打开速度。