微前端是什么？
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端借鉴了微服务的架构理念，将一个庞大的应用拆分成若干个小应用。 每个小应用都是独立的(独立开发，独立运行，独立部署)。最后再将这些应用组合成一个完整的应用。
微前端特性
- 技术栈无关，任意的技术栈都可接入
- 独立开发，独立部署、独立运行
- 增量升级 针对庞大的项目，做技术升级或重构相当麻烦，使用微前端可以渐进式升级
- 提效 项目大难以维护，协作效率低。微应用可以很好拆分，提升效率
微前端方案
single-spa
single-spa 通过劫持路由的方式来做子应用之间的切换，但接入方式需要融合自身的路由，有一定的局限性。
qiankun(推荐)
qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台。它对 single-spa 做了一层封装。主要解决了 single-spa 的一些痛点和不足。通过 import-html-entry 包解析 HTML 获取资源路径，然后对资源进行解析、加载。
通过对执行环境的修改，它实现了 JS 沙箱、样式隔离 等特性。
美中不足就是对vite项目兼容不是那么好，不过我们可以通过安装 vite-plugin-qiankun 插件来做处理
京东micro-app方案
京东 micro-app 并没有沿袭 single-spa 的思路，而是借鉴了 WebComponent 的思想，通过 CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 webComponents 组件，从而实现微前端的组件化渲染。
iframe
优点
- 非常简单，无需任何改造
- 完美隔离，JS、CSS 都是独立的运行环境
- 不限制使用，页面上可以放多个 iframe 来组合业务
如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。
缺点
- url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
- UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..
- 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
- 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
