聊一聊微前端框架的选型和实现 | 业务平台
一、项目背景
目前,我们开发维护的项目主要有 6 个,但是分别对应 PC 和 H5 两个端:
如上图所示,我们 6个项目最开始是一个一个进行开发维护的,但是到后期,这几个项目之间有的部分会有业务逻辑不同,UI 基本相似的情况出现。而这几个项目前端维护人员较少, 这个时候就要考虑开发效率问题,我们希望相同部分共用,而不是每次都去项目里面进行复 制粘贴,重写逻辑。我们引入微前端,将相似的部分抽离出来,创建一个仓库,实现下图效果
但是上图也会造成一个问题,就是我们每抽离一个模块,需要单独申请一个仓库去进行维护, 这样子维护起来也很麻烦,我们在这个基础上进行改进,引入 MonoRepo+qiankun,最终实 现下图效果。所有模块放在一个仓库中,每次出现新的模块,我们在这一个仓库下面去创建 项目,只维护一个仓库,但是可以在不同项目之间进行切换。
二、微前端方案+技术选型
微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队 的增多、变迁,从一个普通应用演变成一个巨石应用后,随之而来的应用维护难,成本越来越大的问题。
三、目前阶段流行的微前端方案
1、single-spa
在官网中被自称是一个元框架,可以实现在一个页面将多个不同的框架整合。很多微前端方案基于此进行二次开发或者是灵感来源,支持 esm。基本原理是:把 render 函数和 mounted 函数等钩子暴露出来,在远端引入后,在合适的时机执行,把组件挂载到 DOM 上。
缺点:如果不是用成型的框架,如 qiankun,从 0 开始搭建,比较繁琐。
优点:技术栈无关,对代码侵入性不强
2、qiankun
基于single-spa 的微前端解决方案,生产可用,阿里出品。
目前在交易平台项目中订单模块投入使用。 具体代码可以参考购小店的订单模块和购小店的使用方式。
3、MicroApp
一种用于构建微前端应用的极简方案,支持 esm(需要关闭沙箱)京东出品。
优点:qiankun 更多的是用路由的方式引入,microApp 更多是组件方式, 官方文档比较全面:开发文档,比 qiankun 强多了。
4、emp
基于 Webpack5 Module Federation 搭建的微前端解决方案,使用起来更优雅,使用远端的组件就好像本地组件一样,但是必须得是 webpack5。
官方对于跨框架调用不是很推荐,但是提供了Vue3 调用Vue2 组件; Vue&React 互相调用。
5、Garfish
包含构建微前端系统时所需要的基本能力,任意前端框架均可使用。接入简单,可轻松将多个前端应用组合成内聚的单个产品。沙箱隔离机制更完善。
6、Npm
npm 的方式相对来说,更加传统一些,如果用 npm 来做微前端的话:可能需要把原来业务,可复用模块抽离出来,在原来项目重新引入。专门维护一个公共模块的库,编译时候引入,导致最终的文件变大。
7、iframe
限制太大。除了特殊场合,不太推荐使用。
8、MonoRepo
严格来说,MonoRepo不算是微前端的解决方案,类似npm方式,但是也可以达到很方便的共享代码的效果。多个相似项目的代码在一个仓库里,把共用的业务逻辑或者组件抽离到单独 的项目中去维护。
四、技术选型
因为所有的 C 端代码都是用的spack,所以排除了微前端中的 webpack模式
不想对项目改动太大,所以也排除了npm模式和 iframe 模式。
想要各个项目共享组件,所以采用monoRepo+qiankun,把多个项目在一个仓库中维护
五、项目实践关键点
1、在项目根目录下面创建 packages 文件夹,用来存放我们各种包,然后在根目录新建 pnpm 的工作区文件 pnpm-workspace.yaml,输入下面代码就可以将包进行关联
2、路由页面
必须保证微应用加载时主应用这个路由页面也加载了。
主应用注册这个路由时给 path 加一个 *,注意:如果这个路由有其他子路由,需要另外 注册一个路由,仍然使用这个组件即可。这里我们根据不同的项目,activeRule 通过主项目传值的方式告诉子项目。
微应用的 activeRule 需要包含主应用的这个路由 path。
3、安装 qiankun,在主应用注册微应用
4、在微应用导出相应生命周期钩子并配置微应用打包工具
至此,MonoRepo+qiankun 项目搭建完成,可以在子项目中进行各自逻辑开发。
六、遇到问题
1、子项目如何知道应该走对应模块的逻辑
将模块属性进行抽象,根据不同模块创建不同实例对象,在子项目mount 阶段根据主项目传的平台标识进行实例创建。
2、子应用跟主应用不在同一个域名下跨域问题 因为不同子应用,申请的不同域名,单独打包部署,qiankun框架实际上是引入子应用打包生成的js文件,会出现跨域问题。开发环境要在子项目里面设置允许跨域。生产环境我们在nginx对应子项目的域名下面设置允许跨域。
3、登录cookie
我们项目里面没有将域名统一,拉取微应用 entry 的请求都是跨域的,所以通过自定义 fetch 的方式,开启 fetch的 cors 模式.
4、CSS隔离
样式的隔离有很多种处理方式,如:BEM、CSS Module、css 前缀、动态加载/卸载样式表、Web Components 自带隔离机制等。
5、JS沙箱
如何确保子应用之间的全局变量不会互相干扰,实现js的隔离。普遍的做法是给全局变量添加前缀,这种方式类似css的BEM,通过约定的方式来避免冲突。这种方式简单,但不是很靠谱。qiankun 内部的实现方式是通过Proxy 来实现的沙箱模式,即在应用的 bootstrap 及 mount 两个生命周期开始之前分别给全局状态打下快照,然后当应用切出/卸载时,将状态回滚至 bootstrap 开始之前的阶段,确保应用对全局状态的污染全部清零
6、数据通信
可以使用官方的initGlobalState方法
我们这个项目应用之间不涉及数据共享,所以没有顶级 store 的概念。模块之间的简单通信可以通过 eventEmitter来实现。
7、子应用缓存问题
子应用文件更新之后,访问的还是之前版本的内容,没有及时更新。 服务器需要给微应用的 index.html 配置一个响应头:Cache-Control no-cache,意思就是每次请求都检查是否更新。在nginx上配置:location = /index.html { add_header Cache-Control no-cache; }
相关文章:

聊一聊微前端框架的选型和实现 | 业务平台
一、项目背景 目前,我们开发维护的项目主要有 6 个,但是分别对应 PC 和 H5 两个端: 如上图所示,我们 6个项目最开始是一个一个进行开发维护的,但是到后期,这几个项目之间有的部分会有业务逻辑不同ÿ…...

Elasticsearch 集成---框架集成SpringData-集成测试-索引操作
1.Spring Data 框架介绍 Spring Data 是一个用于简化数据库、非关系型数据库、索引库访问,并支持云服务的 开源框架。其主要目标是使得对数据的访问变得方便快捷,并支持 map-reduce 框架和云计 算数据服务。 Spring Data 可以极大的简化 JPA &a…...

将Series序列中的缺失值用后一个值填充Series.bfill()
【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 对于Series序列中的缺失值n1 用n1后面的值n2来填充替代 Series.bfill() [太阳]选择题 关于以下代码的说法中错误的是? import numpy as np import pandas as pd a pd.Series([1,np.nan,2,np.…...

用香港服务器域名需要备案吗?
在选择服务器的时候,很多人会考虑使用香港服务器。香港服务器的一个优势就是不需要备案。不管是虚拟主机还是云主机,无论是个人网站还是商业网站,都不需要进行备案手续。 域名实名认证 虽然不需要备案,但使用香港服务器搭建…...

【项目经理】项目管理杂谈
杂谈 1. 走上管理岗位,别再自己埋头干了2. 如何更好地管理项目进度3. 管理是“管事”而不是“管人”4. 让领导欣赏的十个沟通技巧在这里插入图片描述 1. 走上管理岗位,别再自己埋头干了 2. 如何更好地管理项目进度 3. 管理是“管事”而不是“管人” 4. 让…...
【算法总结篇】 笔面试常见题目
综述: 💞目的:本系列是个人整理为了秋招算法的,整理期间苛求每个知识点,平衡理解简易度与深入程度。 🥰来源:材料主要源于网上知识点进行的,每个代码参考热门大佬博客和leetcode平台…...

Java基础 数据结构一【栈、队列】
什么是数据结构 数据结构是计算机科学中的一个重要概念,用于组织和存储数据以便有效地进行访问、操作和管理。它涉及了如何在计算机内存中组织数据,以便于在不同操作中进行查找、插入、删除等操作 数据结构可以看作是一种数据的组织方式,不…...

Spark on Yarn集群模式搭建及测试
🥇🥇【大数据学习记录篇】-持续更新中~🥇🥇 点击传送:大数据学习专栏 持续更新中,感谢各位前辈朋友们支持学习~ 文章目录 1.Spark on Yarn集群模式介绍2.搭建环境准备3.搭建步骤 1.Spark on Yarn集群模式介…...

vue 简单实验 v-on html事件绑定
1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"event-handling"><p>{{ message }}</p><button v-on:click"reverseMessage">反转 Message</but…...

c#设计模式-创建型模式 之 原型模式
概述 原型模式是一种创建型设计模式,它允许你复制已有对象,而无需使代码依赖它们所属的类。新的对象可以通过原型模式对已有对象进行复制来获得,而不是每次都重新创建。 原型模式包含如下角色: 抽象原型类:规定了具…...

运放的分类、运放的参数
一、运放的分类 运放按功能分为通用运放与专用运放(高速运放、精密运放、低IB运放等)。 1.1通用运放 除廉价外,没有任何最优指标的运放。 例:uA741,LM324,TL06X,TL07X、TL08X等 国外知名运放…...

手写数字识别之优化算法:观察Loss下降的情况判断合理的学习率
目录 手写数字识别之优化算法:观察Loss下降的情况判断合理的学习率 前提条件 设置学习率 学习率的主流优化算法 手写数字识别之优化算法:观察Loss下降的情况判断合理的学习率 我们明确了分类任务的损失函数(优化目标)的相关概念和实现方法ÿ…...

软件工程(二十) 系统运行与软件维护
1、系统转换计划 1.1、遗留系统的演化策略 时至今日,你想去开发一个系统,想完全不涉及到已有的系统,基本是不可能的事情。但是对于已有系统我们有一个策略。 比如我们是淘汰掉已有系统,还是继承已有系统,或者集成已有系统,或者改造遗留的系统呢,都是不同的策略。 技术…...

蓝蓝设计ui设计公司作品--泛亚高科-光伏电站控制系统界面设计
泛亚高科(北京)科技有限公司(以下简称“泛亚高科”),一个以实时监控、高精度数值计算为基础的科技公司, 自成立以来,组成了以博士、硕士为核心的技术团队,整合了华北电力大学等高校资源,凭借在电…...
软考高级系统架构设计师系列论文七十:论信息系统的安全体系
软考高级系统架构设计师系列论文七十:论信息系统的安全体系 一、信息系统相关知识点二、摘要三、正文四、总结一、信息系统相关知识点 软考高级信息系统项目管理师系列之四十三:信息系统安全管理...

Softing dataFEED OPC Suite——助力数字孪生技术发展
一 行业概览 数字孪生技术是充分利用物理模型、传感器更新、运行历史等数据,集成多学科、多物理量、多尺度、多概率的仿真过程,在虚拟空间中完成映射,从而反映相对应的实体装备的全生命周期过程。数字孪生技术已经应用在众多领域:…...

LLaMA中ROPE位置编码实现源码解析
1、Attention中q,经下式,生成新的q。m为句长length,d为embedding_dim/head θ i 1 1000 0 2 i d \theta_i\frac{1}{10000^\frac{2i}{d}} θi10000d2i1 2、LLaMA中RoPE源码 import torchdef precompute_freqs_cis(dim: int, end: i…...
在c++ 20下使用微软的proxy库替代传统的virtual动态多态
传统的virtual动态多态,经常会有下面这样的使用需求: #include <iostream> #include <vector>// 声明一个包含virtual虚函数的基类 struct shape {virtual ~shape() {}virtual void draw() 0; };// 派生,实现virtual虚函数 str…...

Spring MVC:@RequestMapping
Spring MVC RequestMapping属性 RequestMapping RequestMapping, 是 Spring Web 应用程序中最常用的注解之一,主要用于映射 HTTP 请求 URL 与处理请求的处理器 Controller 方法上。使用 RequestMapping 注解可以方便地定义处理器 Controller 的方法来处…...

【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint
1、运行好后自动打开浏览器 package.json中 vite后面加上 --open 2、安装eslint npm i eslint -D3、运行 eslint --init 之后,回答一些问题, 自动创建 .eslintrc 配置文件。 npx eslint --init回答问题如下: 使用eslint仅检查语法&…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...

Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...