微前端入门一

微前端架构模式

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

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

• Load
• bootstrap
• Mount
• Unload
• Unmount

拆分应用的技术方式：

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

划分微前端的方式：

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

应用通讯：

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

公共依赖：

• CDN - externals
• webpack5 联邦模块