image.png

一、微前端

1. 微前端架构

• 应用自治
• 单一职责
• 技术栈无关

2. 为什么需要微前端

• 遗留系统迁移
• 后端解耦，前端聚合
• 热闹驱动开发

二、微前端的技术拆分方式

1. 路由分发式：通过HTTP服务器的反向代理功能，将请求路由映射到对应的应用上
2. 前端微服务化：在不同的框架之上设计通信和加载机制，以在一个页面内加载对应的应用
3. 微应用：通过软件工程的方式，在部署构建环境中，把多个独立的应用组合成一个单体应用
4. 微件化：开发一个新的构建系统，将部分业务功能构建成一个独立的chunk代码，使用时只需要远程加载即可
5. 前端容器化：将iframe作为容器来容纳其它前端应用
6. 应用组件化：借助于Web Components技术，来构建跨框架的前端应用

三、微前端的业务划分方式

1. 按照业务拆分
2. 按照权限拆分
3. 按照变更的频率拆分
4. 按照组织结构拆分
5. 跟随后端微服务拆分
6. 按照领域拆分

四、微前端的架构设计

1. 组件与模式库

• 样式：组件级样式、应用级样式、系统级样式
• 业务组件及共享库

2. 应用通信机制

• 同级通信：通过全局的自定义事件、通过共享Window
• 父子级通信：通过PostMessage在父子窗口之间进行通信；通过parent.window寻找到父窗口，再发出全局的自定义事件；当其他应用加载时，将消息发送给父窗口，由父窗口发出自定义事件；当其他应用未加载时，先将消息传递给父窗口，再由父窗口进行存储，提供一个获取通信的机制。