微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应 用。
微前端的核心在于拆, 拆完后在合，实现分而治之！
1. 微前端解决的问题
- 不同团队（技术栈不同），同时开发一个应用
- 每个团队开发的模块都可以独立开发，独立部署
- 实现增量迁移
**2.**如何实现微前端
我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的模块。当路径切换时加载不同
的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！
从而解决了前端协同开发问题
**3.**实现微前端技术方案
采用何种方案进行应用拆分？
采用何种方式进行应用通信？
应用之间如何进行隔离？
3.1 iframe
微前端的最简单方案，通过 iframe 加载子应用。
通信可以通过 postMessage 进行通信。
完美的沙箱机制自带应用隔离。
缺点：用户体验差 （弹框只能在iframe中、在内部切换刷新就会丢失状态）
3.2 Web Components
- 将前端应用程序分解为自定义 HTML 元素。
- 基于 CustomEvent 实现通信
- Shadow DOM 天生的作用域隔离
_缺点：浏览器支持问题、学习成本、调试困难、修改样式困难等问题_。
3.3 single-spa
- single-spa 通过路由劫持实现应用的加载（采用 SystemJS），提供应用间公共组件加载及
公共业务逻辑处理。子应用需要暴露固定的钩子 bootstrap、mount、 unmount）接入协
议。
基于 props 主子应用间通信
无沙箱机制，需要实现自己实现 JS 沙箱以及 CSS 沙箱
缺点：学习成本、无沙箱机制、需要对原有的应用进行改造、子应用间相同资源重复加载问题。
3.4 qiankun
- 2019 年 qiankun 基于 single-spa，提供了开箱即用的 api（single-spa + sanbox + import-html-entry）
- 做到了 技术栈无关、并且接入简单
- 实现了样式隔离和 js 隔离
3.5 Module federation
通过模块联邦将组件进行打包导出使用
共享模块的方式进行通信
无 CSS 沙箱和 JS 沙箱缺点：需要webpack5。
