微前端入门一

微前端架构模式

  • 基座模式(管理式)
    通过一个应用来管理其他应用。(设计难度小,方便实践,通用度低)
  • 自组织式
    应用之间是平等的,不存在相互管理的模式。(设计难度大,不方便实施,通用度高)

前端微架构与后端微架构的不同之处在于生命周期。微前端应用作为一个客户端应用,每个应用都拥有自己的生命周期:

  • Load
  • bootstrap
  • Mount
  • Unload
  • Unmount

拆分应用的技术方式:

  • 路由分发式:通过HTTP服务器的反向代理功能,来将请求路由到对应的应用上(一个页面只有唯一一个应用)
  • 前端微服务化:在不同的框架之上设计通讯,加载机制,以在一个页面内加载对应的应用(一个页面上同时存在两个及以上的前端应用在运行)
  • 微应用:通过软件工程的方式,在部署构建环境中,组合多个独立应用成一个单体应用
  • 微件化:开发一个新的构建系统,将部分业务功能构建成一个独立的chunk代码,使用时只需要远程加载即可
  • 前端容器化:通过将iFrame作为容器,来容纳其他前端应用
  • 应用组件化:借助于Web Components技术,来构建跨框架的前端应用

划分微前端的方式:

  • 按照业务拆分
  • 按照权限拆分
  • 按照变更的频率拆分
  • 按照组织结构拆分
  • 跟随后端微服务划分

应用通讯:

  • 基于URL来进行数据传递,但是传递消息能力弱
  • 基于CustomEvent (浏览器提供的自定义事件)实现通信
  • 基于props主子应用间通信
  • 使用全局变量,Redux进行通信

公共依赖:

  • CDN - externals
  • webpack5 联邦模块

猜你喜欢

转载自blog.csdn.net/weixin_40693643/article/details/108655023