技术实践—微前端技术应用

微前端是一种新兴的前端架构模式,是一种类似于微服务的架构,将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立,可以由不同团队开发维护,部署,组合这些微应用,行成一个聚合应用。

微前端不是一门具体的技术,而是整合了技术、策略和方法,可能会以脚手架、辅助插件和规范约束这种生态圈形式展示出来,是一种宏观上的架构。

微前端技术方案

微前端主要分两种架构模式

  1. 基座模式

通过一个主应用,来管理其它应用。设计难度小,方便实践,但是通用度低。

  1. 自组织模式

应用之间是平等的,不存在相互管理的模式。设计难度大,不方便实施,但是通用度高

微前端技术方案对比:

方案

开发成本

维护成本

实现难度

缺点

路由分发

配置较多,性能较差

iframe

1、无法保持路由状态,刷新后路由状态就丢失

2、完全的隔离导致与子应用的交互变得极其困难

3、iframe 中的弹窗无法突破其本身,无法应用到整个大应用中,只能在对应的窗口内展示

4、由于可能应用间不是在相同的域内,主应用的 cookie 要透传到根域名都不同的子应用中才能实现免登录效果。

5、每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程,占用大量资源的同时也在极大的消耗资源,有严重的性能问题

single-spa

共享及隔离粒度不统一

web-components

需要一定的学习成本和使用成本,对兼容性有要求的项目无法使用

Module-Federation

多个项目组合,需要考虑组合情况

微前端技术框架对比:

技术框架

优点

缺点

qiankun(基座模式)(阿里)

1、HTML Entry接入方式

2、资源预加载

3、沙箱隔离

4、技术栈无关

5、业界应用较多的方案,导入导出有手动加载的实践,其他产品线也有应用

1、子应用和子应用的数据共享需要主应用做转发

2、共用组件方法困难

3、css隔离方案并不完美,子应用会影响主应用的样式

EMP(去中心模式)

1、去中心化,基站应用只用来共享组件,业务应用可以随意组合,可跨技术栈调用

2、应用间直接通信

3、可直接暴露需要共享的模块

4、按需加载,不用加载完整项目

5、资源复用,减少编译体积

1、业界应用没有qiankun广,技术较新

2、无法适配旧框架

3、单页微前端应用解决方案

4、没有使用过,有更多的学习成本

micro-app(基座模式)(京东)

1、支持静态资源地址补全

2、支持元素隔离

3、支持插件系统

4、轻量化,侵入性低,改造简单

1、业界应用没有qiankun广,技术较新

2、子应用和子应用的数据共享需要主应用做转发

3、共用组件方法困难

背景及问题分析

OceanMind海睿思数据中台产品采用松耦合架构,基于海睿思数据计算基础平台(PaaS)提供数据集成、数据处理分析、数据治理、元数据管理、数据管理等多个产品功能模块,支持用户根据自身需求组合搭配、逐步演进。

然而,随着产品不断的迭代开发,页面数量越来越多,形成了一个上百个页面的巨型单体应用,因此带来以下问题:

  1. 文件和依赖过多,造成本地开发和打包部署的性能问题;
  2. 应用数量多、耦合性强,造成维护成本高,往往出现改一处而动全身的问题;
  3. 当部分内容功能在面临技术升级和重构诉求时,面临改一处而动全身的问题。

为了解决这些问题,需要对项目进行拆分、渐进式的重构、同时兼容老项目。此时微前端架构符合我们的诉求。

改造方案

OceanMind分为元数据管理,数据集成,数据处理分析,站内信,运维管理等多个模块,这些模块最初都是在一个项目工程下,技术栈统一,交互十分相似。在要求复用已经开发好的组件的前提下,我们基于Module-Federation核心技术,采用emp框架,依托于导航页进行页面模块划分,逐步完成微前端改造计划。

每个具体的子应用都包含公共侧边栏,公共头部,统一的拦截逻辑,和请求逻辑。

首先拆分出公共组件项目,用来开发公共功能,如统一拦截,统一方法,必备依赖,公共通用的交互组件,公共样式,权限管理等,通过empShare配置导出,引用项目时,正确引用remotes配置,按照正常组件方式引用,也可通过在路由配置地址,当做页面使用。

按照不同的业务模块,进行业务微前端项目拆分,模块仅保留原业务相关逻辑,用户信息等通用能力移交给公共项目组件去实现,业务微前端项目无需考虑。对于状态存储,每个业务模块将自己的store注册到公共项目的store中,做为一个模块。这样整个OceanMind只有一个唯一顶层store,方便业务模块使用公用信息。

为方便本地开发,将所有微前端项目放在同一目录,在同级增加node脚本,便于一键启动多个微前端项目及本地打包构建。

改造中遇到的问题及解决方案:

  1. 原OceanMind为vue-cli创建,改为emp后,webpack版本变更为5,部分依赖需要进行升级兼容,部分代码写法要进行改变。
  2. 业务应用在store中使用持久化插件时需要注意,需要自定义名称,否则会造成持久化信息被覆盖问题。
  3. 启动项目有些警告信息,是由于新版babel增加提示造成的,无需考虑。
  4. 样式污染问题,通过规范样式,增加scoped解决。

价值

在微前端改造过程中,团队成员对整体代码更加熟悉,业务代码更专注于业务层面的开发,无需再考虑通用性能力;

需求增加或修改时,对代码的侵入程度更小了,提高了迭代稳定性和开发效率,可实现按需按模块发布;

加速构建速度,拆分后只需专注影响模块,不需要考虑其他模块,打包和本地开发速度大幅提升

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/50782.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【调色板软件】免费、开源的调色板软件,焰火十二卷,提供了多种功能来生成一组调和色彩NO.108

本文一共:316 个字,需要阅读:1 分钟,更新时间:2024年7 月27日,部分内容具有时效性,如有失效请留言,阅读量:0 使用平台: Windows/macOS/CentOS/Ubuntu 由于我不是很懂,有需要的人自己摸索吧 资源来源于网络,免费分享仅供学习和测试使用&…

PostgreSQL 中如何重置序列值:将自增 ID 设定为特定值开始

我是从excel中将数据导入,然后再通过sql插入数据,就报错。 需要设置自增ID开始值 1、确定序列名称: 首先,需要找到与的增字段相关的序列名称。假设表名是 my_table 和自增字段是 id,可以使用以下查询来获取序列名称…

C 语言动态链表

线性结构->顺序存储->动态链表 一、理论部分 从起源中理解事物,就是从本质上理解事物。 -杜勒鲁奇 动态链表是通过结点(Node)的集合来非连续地存储数据,结点之间通过指针相互连接。 动态链表本身就是一种动态分配内存的…

【深度学习】LLaMA-Factory 大模型微调工具, 大模型GLM-4-9B Chat ,微调与部署 (2)

文章目录 数据准备chat评估模型导出模型部署总结 资料: https://github.com/hiyouga/LLaMA-Factory/blob/main/README_zh.md https://www.53ai.com/news/qianyanjishu/2015.html 代码拉取: git clone https://github.com/hiyouga/LLaMA-Factory.git cd …

万物互联,触手可及“2024南京智慧城市,物联网,大数据展会”

在金秋送爽的11月,南京这座历史悠久而又充满活力的城市,即将迎来一场科技盛宴——2024南京智慧城市、物联网、大数据展会。这不仅是一场技术的集会,更是未来生活蓝图的预览,它汇聚了全球顶尖的科技企业、创新者及行业精英&#xf…

【C++】循环结构-while语句

while 语句的语法格式&#xff1a; while (循环条件) {在满足循环条件下执行的操作} 注意要留有跳出循环的方式&#xff0c;避免死循环 1、不写 whlie (1)&#xff0c;写具体的循环条件 2、写while(1)&#xff0c;用 break 跳出循环 下面是一个实例 #include<iostream…

邮件攻击案例系列三:动态 IP 池爆破员工邮箱钓鱼重要客户

案例描述 2023 年 11 月&#xff0c;某制造业企业员工 Emily 接到海外客户电话&#xff0c;向其核实一封电子邮件的真实性&#xff0c;因为客户认为&#xff0c;该邮件所给出的链接不像是该公司的官网网址。Emily 查看自己的邮箱&#xff0c;并未发现客户所说的邮件。但从客户…

数据结构-----对列

前言 Hello, 小伙伴们&#xff0c;你们的作者菌又来了&#xff0c;前不久&#xff0c;我们学习了一种数据结构----栈&#xff0c;他特殊的性质使得他在一些数据管理的问题上被广泛的使用&#xff0c;那今天&#xff0c;我们就来学习另一种十分重要的数据结构--对列。 在开始之…

Linux字符设备驱动基本框架

本章我们从 Linux 驱动开发中最基础的字符设备驱动开始&#xff0c;重点学习 Linux 下字符设备驱动开发框架。本章会以一个虚拟的设备为例&#xff0c;讲解如何进行字符设备驱动开发&#xff0c;以及如何编写测试 APP 来测试驱动工作是否正常&#xff0c;为以后的学习打下坚实的…

3. 系统上电启动流程

1. 概述 上电启动&#xff0c;可参考恒玄sdk的指导手册。 注&#xff1a;可以在sdk这里加载自己的入口函数 STEP1&#xff1a; STEP2&#xff1a; STEP3&#xff1a; STEP4&#xff1a;

【日常记录】【插件】多媒体文本化: text-image 可以将文字、图片、视频进行「文本化」

文章目录 1. html基本结构2. 画文字3. 画图片4. 画视频参考地址 1. html基本结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-s…

ctfshow web入门 中期测评 web492--web502

web492 <?php include(render/render_class.php); include(render/db_class.php);$action$_GET[action]; if(!isset($action)){header(location:index.php?actionlogin);die(); }if($actioncheck){extract($_GET);if(preg_match(/^[A-Za-z0-9]$/, $username)){$sql &qu…

如何设置postgresql数据库的账户密码

说明&#xff1a;在我的云服务器上&#xff0c;postgres是使用yum的方式安装的&#xff0c;不需要设置postgres账户的密码&#xff0c;本文介绍安装后如何手动设置postgres账户的密码&#xff1b; postgres数据库安装&#xff0c;参考下面这篇文章&#xff1a; PostgreSQL安装…

SpringBoot整合SSE技术详解

Hi &#x1f44b;, Im shy SpringBoot整合SSE技术详解 1. 引言 在现代Web应用中,实时通信变得越来越重要。Server-Sent Events (SSE)是一种允许服务器向客户端推送数据的技术,为实现实时更新提供了一种简单而有效的方法。本文将详细介绍如何在SpringBoot中整合SSE,并探讨S…

python-学生排序(赛氪OJ)

[题目描述] 已有 a、b 两个链表&#xff0c;每个链表中的结点包括学号、成绩。要求把两个链表合并&#xff0c;按学号升序排列。输入格式&#xff1a; 输入共 NM1 行。 第一行&#xff0c;输入 a、b 两个链表元素的数量 N、M&#xff0c;中间用空格隔开。下来 N 行&#xff0c;…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第四十章 Linux用户层和内核层

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

找工作准备刷题Day10 回溯算法 (卡尔41期训练营 7.24)

回溯算法今天这几个题目做过&#xff0c;晚上有面试&#xff0c;今天水一水。 第一题&#xff1a;Leetcode77. 组合 题目描述 解题思路 从题目示例来看&#xff0c;k个数是不能重合的&#xff0c;但是题目没有明确说明这一点。 使用回溯算法解决此问题&#xff0c;利用树形…

ElasticSearch搜索

ES搜索 elastic search 一套搜索引擎技术,主要技术栈包括 Elasticsearch&#xff1a;用于数据存储、计算和搜索 Kibana&#xff1a;用于数据可视化 在数据库模糊查询中,因为不走索引,所以效率很低,而在搜索引擎中,不仅效率高,而且即使出现个别错字,或者用拼音搜索,甚至用同…

docker安装sql server容器

安装 docker pull mcr.microsoft.com/mssql/server:2017-latest启动 docker run -e "ACCEPT_EULAY" -e "SA_PASSWORDwjl135246" -p 1433:1433 -m 4000M --memory 4000M --name sqlserver -d mcr.microsoft.com/mssql/server:2017-latest远程链接即可 参…

用户登录安全是如何保证的?如何保证用户账号、密码安全?

1.HTTP协议直接传输密码&#xff08;无加密&#xff09; 前端 直接发送HTTP请求&#xff08;无加密&#xff09;&#xff0c;攻击者可直接捕获网络包&#xff0c;看到下面的明文信息 因此&#xff0c;使用HTTP协议传输会直接暴露用户敏感信息。 2.HTTPS协议直接传输密码&…