现有微前端解决方案

目录

iframe

single-spa

qiankun

---

iframe

iframe大家都很熟悉，通过iframe实现的话就是每个子应用通过iframe标签嵌入到父应用中，iframe具有天然的隔离属性，各个子应用之间以及子应用和父应用之间都可以做到互不影响。

当然它也是有缺点的：

1. url不同步，如果页面刷新，iframe中的页面的路由会丢失。
2. 全局上下文完全隔离，内存变量不共享。
3. UI不同步，比如iframe中的页面如果有带遮罩晨的弹窗组件，则遮罩就不能覆盖整个浏览器，只能在iframe中生效。
4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

single-spa

中文网址：https://zh-hans.single-spa.js.org/docs/getting-started-overview/

single-spa是最早的微前端框架，可以兼容很多技术栈。single-spa首先在基座中注册所有的子应用的路由，当url改变时就会去进行匹配，匹配到哪一个子应用就会去加载对应的那个子应用。

相对于iframe的实现方案，single-spa中基座和各个子应用之间共享着一个全局上下文，并且不存在url不同步和UI不同步的情况。

缺点：

1. 没有实现js隔离和css隔离。
2. 需要修改大量的配置，包括基座和子应用的，不能开箱即用。

qiankun

qiankun是阿里开源的一个为前端的框架，在阿里内部已经存在过一批上线应用的充分检验及打磨了。

优势：

1. 基于single-spa封装的，提供了更加开箱即用的API。
2. 技术栈无关，任意技术栈的应用均可使用/接入，不论是React/Vue/Angular/JQuery还是等其他框架。
3. HTML Entry的接入方式，像使用iframe一样简单。
4. 实现了single-spa不具备的样式隔离和js隔离。
5. 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。