微前端介绍

目录

微前端概念

微前端特性

场景演示

微前端方案 

iframe 方案

qiankun 方案

micro-app 方案

EMP 方案

无界微前端 方案

无界方案

成本低

速度快

原生隔离

功能强大

总结


前言:微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心诉求。 

微前端概念

微前端是借鉴了微服务的理念,将一个庞大的应用拆分成多个独立灵活的小型应用,每个应用都可以独立开发,独立运行,独立部署,还可以随意组合,这样就降低了耦合度,从而更加灵活。

微前端是一种架构风格,旨在将前端应用程序拆分为更小、更可管理的部分,以便能够独立开发、部署和维护。它的核心思想是将一个大型的前端应用程序拆分为多个小型的、独立的子应用,每个子应用都可以独立开发、测试、部署和运行。

在后台管理系统中,微前端可以提供以下实际应用:

  1. 模块化开发:通过微前端,可以将后台管理系统拆分为多个独立的模块,每个模块负责不同的功能或页面。这样可以实现团队的并行开发,提高开发效率。

  2. 独立部署:每个微前端子应用都可以独立部署,这意味着当某个子应用需要更新或修复时,只需部署该子应用,而不会影响其他子应用的正常运行。这样可以降低系统的维护成本,并提高系统的可用性。

  3. 技术栈灵活性:微前端允许每个子应用使用不同的技术栈,这样可以根据不同的需求选择最适合的技术栈。例如,可以使用React开发一个子应用,使用Vue开发另一个子应用,以及使用Angular开发第三个子应用。

  4. 增量升级:由于每个子应用都是独立的,可以实现增量升级。当需要更新整个后台管理系统时,只需更新相应的子应用,而不需要重新部署整个系统。

总之,微前端在后台管理系统中的实际应用可以提供更好的团队协作、模块化开发、独立部署和技术栈灵活性,从而提高开发效率和系统的可维护性

微前端特性

  • 技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈(vue,react,jq,ng等)
  • 独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖
  • 增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性
  • 独立运行时 微应用之间运行时互不依赖,有独立的状态管理

场景演示

  • 后台管理系统

最外面一层可以当主应用,里面可以放不同的子应用子应用不受技术的限制。

  • web商店(未来趋势)

例如一些导航网站,可以提供微前端的接入,我们的网站也可以入驻该网站,并且还可以提供一些API增加交互,有点类似于小程序。小程序可以调用微信的一些能力例如支付,扫码等,导航类型的网站也可以提供一些API,我们的网站接入之后提供API调用,可以实现更多有趣的玩法。

微前端方案 

iframe 方案

特点

  1. 接入比较简单
  2. 隔离非常稳完美

不足

  1. dom割裂感严重,弹框只能在iframe,而且有滚动条
  2. 通讯非常麻烦,而且刷新iframe url状态丢失
  3. 前进后退按钮无效

qiankun 方案

qiankun 方案是基于 single-spa 的微前端方案。

single-spa 是一种用于构建微前端架构的解决方案

single-spa 的核心思想是将前端应用程序拆分为多个独立的子应用,每个子应用可以由不同的团队开发和维护。这些子应用可以使用不同的框架或技术栈来构建,例如 React、Angular、Vue 等。single-spa 提供了一套机制来协调这些子应用的加载、启动和通信,使它们能够在同一个页面上共存并相互配合工作。

特点

注解 entry

HTML entry 是一种将子应用嵌入到宿主应用的 HTML 页面中的方法。通常,子应用会打包成一个独立的 JavaScript 文件,然后在宿主应用的 HTML 页面中通过 

你可能感兴趣的:(前端)