微前端项目架构图

一、需求分析

在绘制项目架构图之前需要先分析项目需求，并梳理出主子应用功能、框架功能。

主应用

• 注册子应用
• 加载、渲染子应用
• 路由匹配(activeWhen、rules - 由框架判断，注：RPA快捷键也应用到这一思想)
• 获取数据(公共依赖，通过数据做鉴权处理)
• 通信(父子通信，子父通信)

子应用

• 渲染
• 监听通信(主应用传递过来的数据)

微前端框架

• 子应用的注册
• 开始内容(应用加载完成)
• 路由更新判断
• 匹配对应的子应用
• 加载子应用的内容
• 完成所有依赖项的执行
• 将子应用渲染在固定的容器内
• 公共事件的管理
• 异常的捕获和报错
• 全局的状态管理的内容
• 沙箱的隔离
• 通信机制

服务端

• 提供数据服务

发布平台

• 主子应用的打包和发布

二、微前端架构图