image.png
一、微前端
- 微前端架构
- 应用自治
- 单一职责
- 技术栈无关
- 为什么需要微前端
- 遗留系统迁移
- 后端解耦，前端聚合
- 热闹驱动开发
二、微前端的技术拆分方式
- 路由分发式：通过HTTP服务器的反向代理功能，将请求路由映射到对应的应用上
- 前端微服务化：在不同的框架之上设计通信和加载机制，以在一个页面内加载对应的应用
- 微应用：通过软件工程的方式，在部署构建环境中，把多个独立的应用组合成一个单体应用
- 微件化：开发一个新的构建系统，将部分业务功能构建成一个独立的chunk代码，使用时只需要远程加载即可
- 前端容器化：将iframe作为容器来容纳其它前端应用
- 应用组件化：借助于Web Components技术，来构建跨框架的前端应用
三、微前端的业务划分方式
- 按照业务拆分
- 按照权限拆分
- 按照变更的频率拆分
- 按照组织结构拆分
- 跟随后端微服务拆分
- 按照领域拆分
四、微前端的架构设计
- 组件与模式库
- 样式：组件级样式、应用级样式、系统级样式
- 业务组件及共享库
- 应用通信机制
- 同级通信：通过全局的自定义事件、通过共享Window
- 父子级通信：通过PostMessage在父子窗口之间进行通信；通过parent.window寻找到父窗口，再发出全局的自定义事件；当其他应用加载时，将消息发送给父窗口，由父窗口发出自定义事件；当其他应用未加载时，先将消息传递给父窗口，再由父窗口进行存储，提供一个获取通信的机制。
网友评论