微前端框架主流方案剖析

微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。
本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用,如何运行,从而能选出适合自己项目的微前端方案。

iframe

在没有各大微前端解决方案之前,iframe是解决这类问题的不二之选,因为iframe提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。
但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:

  1. url 不同步,浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  2. UI 不同步,DOM 结构不共享,弹窗只能在iframe内部展示,无法覆盖全局

  3. 全局上下文完全隔离,内存变量不共享,iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

  4. ,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

single-spa

目前(2024年4月)github star 13k

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

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

相关文章

实时智能应答3D数字人搭建2

先看效果: 3d数字人讲黑洞 根据艾媒咨询数据,2021年,中国虚拟人核心产业规模达到62.2亿元,带动市场规模达到1074.9亿元;2025年,这一数据预计将达到480.6亿元与6402.7亿元,同比增长迅猛。数字人可…

C++(3) —— 核心编程

一、内存区分模型 1.1 程序运行前 #include<iostream> using namespace std;// 全局变量 int g_a 10; int g_b 20;// const修饰的全局变量&#xff0c;全局常量 const int c_g_a 10; const int c_g_b 20;int main() {// 全局区// 全局变量、静态变量、常量// 创建普通…

一个巧用委托解决的问题(C#)

个人觉得是委托应用的一个很好的例子&#xff0c;故做一下分享&#xff0c;希望能帮助到您&#xff0c;内容比较简单&#xff0c;大佬可以跳过。我是做桌面医疗软件开发的&#xff0c;前段时间在做一个需求。在签发检验项目医嘱时&#xff0c;调用第三方接口&#xff0c;然后带…

Mac环境简化RSA密钥生成/校验命令

文章目录 生成RSA密钥对验证RSA密钥对 生成RSA密钥对 正常RSA密钥对生成操作命令 openssl genrsa -out rsa_private_key.pem 2048 openssl rsa -pubout -in rsa_private_key.pem -out rsa_public_key.pem通过添加环境变量来简化RSA密钥对生成操作 设置环境变量.zshrc或.bash_…

实验6-1:求整数位数(循环结构)

实验6-1&#xff1a;求整数位数&#xff08;循环结构&#xff09; 输入一个不多于9位的正整数&#xff0c;要求一、逆序输出各位数字&#xff0c;二、输出它是几位数。【输入形式】 正整数【输出形式】 逆序输出各位数字 几位数 【样例输入】 234567891 【样例输出】 1 9 8 7 …

GPT演变:从GPT到ChatGPT

Transformer 论文 Attention Is All You Need The dominant sequence transduction models are based on complex recurrent or convolutional neural networks in an encoder-decoder configuration. The best performing models also connect the encoder… https://arxiv.o…

Java基础常见知识点面试总结

文章目录 1. 变量、数据类型转换、运算符1.1 变量1.2 数据类型转换1.2.1强转的注意事项 1.3 进制的转换1.4 位运算符1.5 运算符1.6 三元运算符 2. 流程控制2.1 键盘录入_Scanner2.2 Random随机数2.3 switch(选择语句)2.4 分支语句2.5 循环语句 3. 数组3.1 数组的定义3.2 数组操…

乐趣Python——文件与数据:挥别乱糟糟的桌面

各位朋友们&#xff0c;今天我们要开启一场非凡的冒险——进入文件操作的世界&#xff01;你知道吗&#xff0c;在你的电脑里&#xff0c;有一个叫做“文件系统”的迷宫&#xff0c;里面藏着各种各样的文件和文件夹&#xff0c;它们就像是迷宫中的宝藏。但有时候&#xff0c;这…

wpf下如何实现超低延迟的RTMP或RTSP播放

技术背景 我们在做Windows平台RTMP和RTSP播放模块对接的时候&#xff0c;有开发者需要在wpf下调用&#xff0c;如果要在wpf下使用&#xff0c;只需要参考C#的对接demo即可&#xff0c;唯一不同的是&#xff0c;视频流数据显示的话&#xff0c;要么通过控件模式&#xff0c;要么…

ARM-SC2440

1ARM 2ARM汇编指令集 2.1 2.1.1【MOV】 area reset, code, readonlycode32entrymov r0, #1end2.1.2【SUB】 area reset, code, readonlycode32entrymov r0, #0x02sub r1, r0, #1end2.1.3【ORR】 preserve8area reset, code, readonlycode32entrymov r0, #0X0Fmov r1, #2orr …

前端面试问题汇总 - 工程管理工具篇

1. webpack常用loader有哪些&#xff1f; babel-loader&#xff1a; 用于将 ES6 代码转换为向后兼容的 JavaScript 代码&#xff0c;以便在旧版本的浏览器中运行。css-loader&#xff1a; 用于加载 CSS 文件&#xff0c;并解析其中的 import 和 url 引用关系。style-loader&…

SpringMVC(一)【入门】

前言 学完了大数据基本组件&#xff0c;SpringMVC 也得了解了解&#xff0c;为的是之后 SpringBoot 能够快速掌握。SpringMVC 可能在大数据工作中用的不多&#xff0c;但是 SSM 毕竟是现在就业必知必会的东西了。SpringBoot 在数仓开发可能会经常用到&#xff0c;所以不废话学吧…

神经网络中的权重初始化

神经网络的权重初始化 从神经网络输入和输出尽量都要有相同的方差出发&#xff0c;但均值很难保持一致&#xff08;由于有一些非负的激活函数&#xff09;。而且现有的标准化策略也是起到了同样的作用&#xff0c;如BN&#xff0c;LN等&#xff0c;都是努力将中间层的输出的方…

Mapmost Alpha:开启三维城市场景创作新纪元

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

vue3中使用tailwind.css注意

中文官网 教程 使用PostCSS 注意&#xff01;&#xff01;&#xff01; 成功的关键 vite配置 import tailwindcss from tailwindcssexport default defineConfig({// ...css: {postcss: {plugins: [tailwindcss,]}},// ... })

2024年4月8日腾讯云故障复盘及情况说明

2024年4月8日15点23分&#xff0c;腾讯云团队收到告警信息&#xff0c;云API服务处于异常状态&#xff1b;随即在腾讯云工单、售后服务群以及微博等渠道开始大量出现腾讯云控制台登录不上的客户反馈。 经过故障定位发现&#xff0c;客户登录不上控制台正是由云API异常所导致。云…

面试必备:3个技巧提升表达能力,轻松拿Offer!

在职场竞争中&#xff0c;面试是求职者迈向成功的重要一步。想要在众多竞争者中脱颖而出&#xff0c;获得面试官的青睐并拿下心仪岗位的offer&#xff0c;良好的表达能力不可或缺。今天&#xff0c;我们就一起探讨如何在面试中有效提升自己的表达能力&#xff0c;为成功铺路。 …

C语言如何生成随机数以及设置随机数的范围

一、随机数的生成 1.rand()函数 C语言提供了⼀个函数叫 rand&#xff0c;这函数是可以生成随机数的&#xff0c;函数原型如下所示&#xff1a; int rand (void); rand函数会返回⼀个伪随机数&#xff0c;这个随机数的范围是在0~RAND_MAX之间&#xff0c;这个RAND_MAX的大小是依…

c语言中声明的问题【求个关注!】

文章目录 1 变量的声明与定义&#xff08;1&#xff09;定义与声明的区别&#xff1a;&#xff08;2&#xff09;为什么要区分定义与声明&#xff1f;&#xff08;3&#xff09;extern是什么 ?&#xff08;4&#xff09;举例&#xff1a; 2 函数的声明&#xff1a;函数声明的格…

前端面试问题汇总 - 其他问题

1. 一个好的产品有哪些特性? 解决问题&#xff1a; 优秀的产品应该能够解决用户的真实问题或满足用户的需求&#xff0c;提供有价值的解决方案。用户体验&#xff1a; 产品应该具有良好的用户体验&#xff0c;包括界面设计、交互设计、易用性等方面&#xff0c;让用户能够舒适…