微前端是什么
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
引用
Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently. -- Micro Frontends
通俗来说，就是在一个web应用中可以独立的运行另一个web应用
微前端有什么使用场景呢？
举例
一个完善的的微前端框架应该具备哪些能力呢？
能力
使用微前端有什么收益呢？(@reference 乾坤)
收益
可能有人会有疑问直接使用iframe不就可以做到吗？
iframe 方案
采用iframe的方案确实可以做到，而且优点非常明显
优点
由于其隔离的太完美导致缺点也非常明显
缺点
single-spa 方案
single-spa是一个目前主流的微前端技术方案，其主要实现思路：
乾坤微前端架构则进一步对single-spa方案进行完善，主要的完善点：
总结一下方案的优缺点：
优点
缺点
无界方案
在乾坤的issue中一个议题非常有意思，有个开发者提出能否利用iframe来实现js沙箱能力，这个idea启发了无界方案，下面详细介绍
应用加载机制和 js 沙箱机制
将子应用的js注入主应用同域的iframe中运行，iframe是一个原生的window沙箱，内部有完整的history和location接口，子应用实例instance运行在iframe中，路由也彻底和主应用解耦，可以直接在业务组件里面启动应用。
采用这种方式我们可以获得
收益
路由同步机制
在iframe内部进行history.pushState，浏览器会自动的在中添加iframe的，浏览器的前进、后退在不做任何处理的情况就可以直接作用于子应用
劫持iframe的history.pushState和history.replaceState，就可以将子应用的url同步到主应用的query参数上，当刷新浏览器初始化iframe时，读回子应用的url并使用iframe的history.replaceState进行同步
采用这种方式我们可以获得
收益
iframe 连接机制和 css 沙箱机制
无界采用webcomponent来实现页面的样式隔离，无界会创建一个wujie自定义元素，然后将子应用的完整结构渲染在内部
子应用的实例instance在iframe内运行，dom在主应用容器下的webcomponent内，通过代理 iframe的document到webcomponent，可以实现两者的互联。
将document的查询类接口：getElementsByTagName、getElementsByClassName、getElementsByName、getElementById、querySelector、querySelectorAll、head、body全部代理到webcomponent，这样instance和webcomponent就精准的链接起来。
当子应用发生切换，iframe保留下来，子应用的容器可能销毁，但webcomponent依然可以选择保留，这样等应用切换回来将webcomponent再挂载回容器上，子应用可以获得类似vue的keep-alive的能力.
采用这种方式我们可以获得
收益
通信机制
承载子应用的iframe和主应用是同域的，所以主、子应用天然就可以很好的进行通信，在无界我们提供三种通信方式
子应用通过$wujie.props可以轻松拿到主应用注入的数据
子应用iframe沙箱和主应用同源，子应用可以直接通过window.parent和主应用通信
无界提供了EventBus实例，注入到主应用和子应用，所有的应用可以去中心化的进行通信
优势
通过上面原理的阐述，我们可以得出无界微前端框架的几点优势：
优势
性能和体积兼具
开箱即用
不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用无需额外处理，应用也极低
