微前端技术

《微前端初探》

参考文献微前端如何落地？https://baijiahao.baidu.com/s?id=1638313846156942854&wfr=spider&for=pc
开始： 由于目前公司页面谁用单页面开发，后面逐步扩展功能，越来越庞大，导致开发、合版、测试、维护都存在很多问题，所以考虑微前端技术进行按功能拆分。

一、概念

   之前只听过微服务的概念，并不了解微前端，借此机会，学习一下微前端的相关知识。微前端 就是将一个巨大的前端工程拆分成一个的小工程，这些小工程具备独立的开发和运行能力，而整个系统就由这些小工程协同合作。微前端是一种类似于微服务的架构，将微服务的理念用于浏览器端，将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用可以独立开发，独立部署，还可以共享组件，并行开发，组件可以通过npm，git tag， git submodule来管理

二、为什么需要微前端？

• 老系统整改
• 聚合前端应用
• 热闹驱动开发：新技术
  新的微前端架构主要是为了解耦前端之间的耦合，提高开发效率
• 遵循一个接口规范，便于系统集成，相互之间不存在依赖关系
• 解耦系统，各自负责各自的开发，部署，上线，维护等
• 解耦系统的同时，也实现了技术隔离，每个微前端都可以使用自己的技术栈

三、设计模式

  微前端应用间的关系分为两种：基座模式，自组织模式
基座模式： 通过一个主应用，来管理其他应用， 设计难度小，通用度低
自组织模式: 应用之间平等，不存在互相依赖，难度大，不方便实行，通用度高

有了架构模型，还有一个查找应用的机制，在微前端中称为注册表模式，可以是一个JSON配置文件，主要做一下内容：

• 发现应用，主应用寻找到其他应用
• 应用注册：可以注册新的应用
• 第三方应用注册：接入第三方应用
• 访问权限配置

---

四、设计理念

应用注册表：拥有每个应用及对应的入口
标识化应用： 对每个应用都应该设置一个标识，便于安装、卸载
生命周期
高内聚 ，低耦合

五、生命周期

微前端每个应用都有自己的生命周期：
load: 决定加载哪个应用
bootStrap: 获取静态资源
mount: 安装应用
Unmount: 卸载

六、如何拆分

拆分应用的方法主要有路由分发、前端微服务化、微应用、微件化、前端容器化、应用组件化等

• 路由分发：通过服务器的反向代理，将不同业务分发到不同的、独立前端应用上
• 前端微服务化： 每个前端都是完全独立，技术栈、开发、部署、应用等
• 组合式集成：开发时都是单一的微小应用的存在，运行时，则通过构建系统合并这些微应用
• 微件化：每个团队编写自己的业务代码，并将编译好的代码部署到指定的服务器上，运行时，只需要加载相应的业务模块
• 前端容器化：iframe技术，页面之间的CSS和js都是隔离的，之间代码互不干扰，相当于建立了一个全新的独立的宿主环境，类似于沙箱，可以结合web component构建，
• 拆分方式大概有按业务拆分、按权限拆分、变更的频率、组织结构、跟随后端微服务拆分