序 - 微前端

几种实现方案

iframe

天然的跨应用集成方案，缺点也很明显(跨域通信限制、DOM割裂导致的类弹窗类区域限制)

适用场景

• 全屏嵌入
• 需要快速集成的跨框架、跨版本的已有老项目

基于路由的渲染

1. SingleSPA:

   基座应用统筹管理路由，基于路由渲染，基座管理和理解都相当费事，且很多事情都需要自己控制和约束

2. 乾坤:

   对single-spa做了进一步封装和完善，简化了注册流程，实现了应用隔离(沙箱)，但基于路由渲染的本质没有变化

适用场景

• 新项目
• 基于UMI的项目
• 需要跨框架开发的项目
• 需要在同一个宿主环境集成的项目

基于代理WebComponet的实现(已有的开源框架中看起来Bug都还比较多，不太稳定)

本质都是通过解析原有DOM，并代理到自定义元素之上

1. 无界
2. micro-app

适用场景

• 渐进式重构已有项目
• 有弹窗等需要跳出iframe限制的元素
• 需要沙箱环境防止污染的情况

基于Webpack的Module Federation

本质上其实是提供了资源共享、资源分离和加载远程资源的能力

适用场景

• 新项目
• 框架确定的项目

基于特定框架的组件化分离方式(目前看来通过Webpack Module Federation就能实现)

基于特定框架，如React、Vue等，将子应用设计成一个组件

适用场景

• 新项目
• 框架确定的项目