微前端理解

•  微服务
  

  • 维基上的定义：一种软件开发技术- 面向服务的体系结构（SOA）架构样式的一种变体，将应用程序构造为一组松散耦合的服务，并通过轻量级的通信协议组织起来
  • 简单来说：将一个单体应用，按照一定的规则拆分为一组服务。这些服务可以有自己仓库，独立开发、部署，有独立边界，由不同团队管理，不同语言编写，对于前端来说仍是一个完整的服务。
  • 微服务主要解决：庞大的一整块后端服务带来的变更和扩展的限制

•  微前端是什么？
  

  • 微前端是将微服务概念扩展到前端世界
  • 微前端的想法是：将网站或Web应用程序视为由独立团队拥有的功能的组合。每个团队都有一个独特的业务或任务领域，它关心并专注于此。团队是跨职能的，从数据库到用户界面端到开发其功能

•  微前端的核心理念：
  

  • 1、与技术无关：每个团队都可以选择和升级他们技术栈，不需要和其他团队协调；自定义元素是隐藏细节地好办法，为他人提供中立地界面
  • 2、隔离团队代码：不共享运行。构建独立应用，不依赖共享状态或共享变量；
  • 3、建立团队前缀；
  • 4、支持本机浏览器功能而不是自定义API：使用浏览器事件进行通信
  • 5、构建弹性站点

• 微前端带来了什么
  

  • 1、 简单、分离、松耦合的代码仓库：各个仓库的代码可以基于业务、权限、变更的频率、组织结构、后端微服务等原则拆分，界限明确，降低耦合
  • 2、独立开发、独立部署：各个项目有自己交付流水线（从构建、测试到上线），并且能够独立部署，不需要考虑其他项目的情况
  • 3、技术栈无关：可以使用不同技术栈的子应用聚拢起来
  • 4、遗留系统迁移：可以将老项目且已经稳定的通过微前端方案直接整合到新的应用中
  • 5、技术栈升级：技术栈版本升级方面，eg：项目成立之初使用当前最新技术antd2，后期技术发展到antd4。针对这种情况可以重启一个应用，使用antd4重构应用，然后使用微前端方案将新旧应用聚合在一起
  • 6、 团队技术成长：与技术栈无关，可以使团队在后期开发中使用新的技术

• 使用微前端的挑战
  

  • 子应用的切换
  • 应用相互隔离，互不干扰
  • 子应用之间通信
  • 多个子应用的并存
  • 用户状态的存储-免登

•  微前端常用的技术方案(截止目前常用的微前端实现方案)
  

  • 路由分发式微前端
  • iframe
  • single-spa
  • qiankun
  • webpack5：module federation
  • Web Component

后续继续输出微前端的配置与应用 ~