当前位置: 首页 > 科技观察

乾坤

时间:2023-03-13 00:01:27 科技观察

项目是如何落地的背景由于业务增长,团队拆分,需要将原有系统(Vue实现)的部分模块迁移到另一个系统(React)。但两个系统的技术栈不同,导致重构成本较高,但业务希望短期见效,后期可以做增量重构。需求对用户不敏感,真正做到了两个系统的融合。经过技术研究,我们决定用微前端来实现。微前端是多个团队通过独立发布功能共同构建现代Web应用的技术手段和方法策略。微前端架构旨在解决由于参与人员和团队在较长时间跨度内的增加和变化,导致单体应用从普通应用演化为FrontendMonolith的问题。无法维护的问题。这与我们目前的情况是一致的。它有以下特点:技术栈无关。主框架不限制接入应用的技术栈,微应用拥有完全的自主开发和部署的自主权。微应用仓库独立,前后端可独立开发。部署完成后,主框架自动完成同步更新和增量升级。面对各种复杂的场景,我们通常很难升级或重构现有系统的整个技术栈,而微前端是一个很好的在独立运行时实现渐进重构的手段和策略。每个微应用之间状态是隔离的,运行时状态是不共享的。技术选型微前端是一种类微服务的架构,目标是将单一的单体应用变成一个将多个小应用聚合为一个的应用。经过研究,我们有以下实施方案。iframe的优点:提供了浏览器原生的硬隔离解决方案,可以完美解决样式隔离、js隔离等所有问题。缺点:url不同步。浏览器刷新时iframeurl状态丢失,后退和前进按钮无法使用,UI不同步,DOM结构不共享,全局上下文完全隔离,内存变量不共享。针对iframe内外系统的通信和数据同步需求,需要将主应用的cookie透传给不同根域名的子应用,以实现免登录的效果。每次子应用进入,都是一个重建浏览器上下文和重新加载资源的过程。缺点层面,暂时不能满足业务需求,所以我们没有采用这个方案。qiankunqiankun是一个基于single-spa的微前端实现库,旨在帮助您更轻松、更轻松地构建一个生产就绪的微前端架构系统。它具有以下特点: