微前端架构模式
- 基座模式(管理式)
通过一个应用来管理其他应用。(设计难度小,方便实践,通用度低) - 自组织式
应用之间是平等的,不存在相互管理的模式。(设计难度大,不方便实施,通用度高)
前端微架构与后端微架构的不同之处在于生命周期。微前端应用作为一个客户端应用,每个应用都拥有自己的生命周期:
- Load
- bootstrap
- Mount
- Unload
- Unmount
拆分应用的技术方式:
- 路由分发式:通过HTTP服务器的反向代理功能,来将请求路由到对应的应用上(一个页面只有唯一一个应用)
- 前端微服务化:在不同的框架之上设计通讯,加载机制,以在一个页面内加载对应的应用(一个页面上同时存在两个及以上的前端应用在运行)
- 微应用:通过软件工程的方式,在部署构建环境中,组合多个独立应用成一个单体应用
- 微件化:开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可
- 前端容器化:通过将iFrame作为容器,来容纳其他前端应用
- 应用组件化:借助于Web Components技术,来构建跨框架的前端应用
划分微前端的方式:
- 按照业务拆分
- 按照权限拆分
- 按照变更的频率拆分
- 按照组织结构拆分
- 跟随后端微服务划分
应用通讯:
- 基于URL来进行数据传递,但是传递消息能力弱
- 基于CustomEvent (浏览器提供的自定义事件)实现通信
- 基于props主子应用间通信
- 使用全局变量,Redux进行通信
公共依赖:
- CDN - externals
- webpack5 联邦模块