微前端（Micro frontends）
复杂、跨团队、高性能要求的项目同时保证 DX 和 UX 的困境？
- 开发者体验：MPA，我不管其它管理平台，它们不要影响我！
- 用户体验：SPA，入口找得到，页面跳转不要白屏！
微前端架构
一种架构理念：将单一的web应用拆解成多个可以独立开发、独立运行、独立部署的小型应用，并将它们整合为一个应用
- 子系统之间开发、技术体系、测试、发布、监控隔离
- 子系统之间可通信
方案对比
-
路由分发式: 通过 HTTP 服务器的反向代理功能，来将请求路由到对应的应用上
-
前端微服务化: 在不同的框架之上设计通讯、加载机制，以在一个页面内加载对应的应用
-
微应用: 通过软件工程的方式，在部署构建环境中，组合多个独立应用成一个单体应用(npm依赖等)
-
微件化: 开发一个新的构建系统，将部分业务功能构建成一个独立的 chunk 代码，使用时只需要远程加载即可
-
前端容器化: 通过将 iFrame 作为容器，来容纳其它前端应用
-
应用组件化: 借助于 Web Components 技术，来构建跨框架的前端应用
两种设计
single-spa
官网：single-spa.js.org/ 示例：single-spa.surge.sh/ 在single-spa和qiankun中都是通过监听url change事件，在路由变化时匹配到渲染的子应用并进行渲染。
- systemjs:systemjs是什么，简单来说，就是Dynamic ES module loader动态模块加载器，动态加载我们每个依赖的编译后的脚本文件。
- single-spa-react:微前端常用的三个生命周期：bootstrap,mount,unmount，不同框架如何和single-spa关联，答案就是通过single-spa-react中间件实现这几个方法，从而支持下一步single-spa进行注册registerApplication
- single-spa:
single-spa关键的几步是：
- 初始：默认劫持浏览器事件，等注册应用完成后执行
- registerApplication注册应用，触发reroute
- start初始化第一次执行,触发reroute
- reroute根据不同情况,实现了加载、卸载、更改组件生命周期状态、并延迟执行执行浏览器事件
reroute执行时机：
- registerApplication初始化注册应用
- start第一次执行
- 浏览器更新路由hashchange/popstate - urlReroute(navigation event)
MicroApp
HTML Entry：是指设置html作为资源入口，通过加载远程html，解析其DOM结构从而获取js、css等静态资源来实现微前端的渲染，这也是qiankun目前采用的渲染方案。
WebComponent：web原生组件，它有两个核心组成部分：CustomElement和ShadowDom。CustomElement用于创建自定义标签，ShadowDom用于创建阴影DOM，阴影DOM具有天然的样式隔离和元素隔离属性。由于WebComponent是原生组件，它可以在任何框架中使用，理论上是实现微前端最优的方案。但WebComponent有一个无法解决的问题 - ShadowDom的兼容性非常不好，一些前端框架在ShadowDom环境下无法正常运行，尤其是react框架。 类WebComponent：就是使用CustomElement结合自定义的ShadowDom实现WebComponent基本一致的功能。
参考
京东MicroApp: juejin.cn/post/698943…
微前端调研及简析SPA实现原理: zhuanlan.zhihu.com/p/144545551
