当前位置: 首页 > news >正文

微前端个人理解与简单总结

最近一段时间在学习微前端,一开始是看各种博客了解微前端含义、对比多种微前端框架优劣,最后选择了qiankun、micro-app、wujie这三种微前端框架进行深入研究、对比。

微前端框架

推出时间

官方文档易读性

社区讨论活跃度

配置难度

Qiankun(蚂蚁)

2019年

Micro-app(京东)

2021年

Wujie(腾讯)

2022年

Qiankun:

我研究、配置的第一个微前端是qiankun,根据qiankun官方文档可以成功搭建Vue主子应用以及react子应用,但文档中配置项层级模糊且对应示例比较片面,好在网上博客、文档多。如果注册了某个子应用,但没有启动的话会报错。

Micro-app:

micro-app官方文档描述清晰,配置过程简单,是我花费时间最少的微前端。如果注册了某个子应用但没有启动的话不会报错。

Wujie:

可以说wujie给我最大的感觉是文档混乱、步骤不清晰、容易误导人,网上相关的博客、文档很少,翻来覆去内容都很相似,参考意义不大。花了半天搭建、配置Vue主子应用还是没能成功。

微前端的应用场景:

  1. 当不同的团队开发同一个应用,所选技术栈不同时;
  2. 现在大型的互联网公司都会为用户提供很多应用和服务,通过微前端可以将多个前端聚合在一起,为用户呈现一站式服务的应用聚合应用。
  3. 需要保持技术栈不落后,就需要在兼容原有系统的同时,使用新框架去开发新功能,而遗留系统的功能已经足够完善且运行稳定,此时没有必要使用新的框架去重构遗留系统;
  4. 某个模块可以被多个项目之间共用;
  5. 为了使系统可以更快速地从故障中恢复或者不因为其中一个模块影响全局。

使用微前端的优缺点:

  1. 如果一个项目很大,我们更改了一部分代码,到发布的时候,就不用整个项目重新打包编译发布了,可以大大节省时间。还有一种情况:我们需要长时间下架、修改某个模块时,不用专门把这个模块代码去掉,它不会影响其它非相关功能线上正常使用。也意味着可以将故障风险的粒度隔离到更小的范围,更容易排查到问题所在;
  2. 微前端支持多种前端框架,可以让“新”应用与"旧"应用并行工作,从而提供了一种迁移手段;
  3. 多个独立的开发团队更容易协同开发单个前端应用,且职责范围更窄,更加易于理解;
  4. 通信比iframe容易(如可以共享cookie、session),浏览器刷新不用重新加载全部资源且url同步,但它样式隔离不够彻底,可能需要额外调整;
  5. 各个团队需要建立维护自己的服务器,构建流程和持续集成的管道,可能还加载冗余的js/css,小型项目或者功能简单的项目没有必要用微前端;
  6. 使用微前端且使用不同数据库的情况下,后端团队有独立的数据库,团队之间需要定期复制数据,一旦出现错误,容易引起数据不一致;
  7. 使用微前端意味着系统拆分,拆分的粒度越小,维护的成本越高;并且如果应用不同技术栈,技术栈种类越多,维护的难度越大。

相关文章:

微前端个人理解与简单总结

最近一段时间在学习微前端,一开始是看各种博客了解微前端含义、对比多种微前端框架优劣,最后选择了qiankun、micro-app、wujie这三种微前端框架进行深入研究、对比。 微前端框架 推出时间 官方文档易读性 社区讨论活跃度 配置难度 Qiankun&#xff…...

PC端企业微信hook协议开发,获取要群发的客户群id

产品说明 一、 hook版本:企业微信hook接口是指将企业微信的功能封装成dll,并提供简易的接口给程序调用。通过hook技术,可以在不修改企业微信客户端源代码的情况下,实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…...

RabbitMQ安装说明

注意: 本次安装以 CentOS 7为例 1、 准备软件 erlang 18.3 1.el7.centos.x86_64.rpm socat 1.7.3.2 5.el7.lux.x86_64.rpm rabbitmq server 3.6.5 1.noarch.rpm 2、安装Erlang rpm -ivh erlang-18.3-1.el7.centos.x86_64.rpm 3.、安装RabbitMQ 安装 rpm -ivh socat-1.7.3.2-…...

scrapy的建模及管道的使用

一、数据建模 通常在做项目的过程中,在items.py中进行数据建模 为什么建模 定义item即提前规划好哪些字段需要抓,防止手误,因为定义好之后,在运行过程中,系统会自动检查,配合注释一起可以清晰的知道要抓…...

Hadoop学习笔记(HDP)-Part.04 基础环境配置

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …...

【Linux】进程控制--进程创建/进程终止/进程等待/进程程序替换/简易shell实现

文章目录 一、进程创建1.fork函数2.fork函数返回值3.写时拷贝4.fork常规用法5.fork调用失败的原因 二、进程终止1.进程退出码2.进程退出场景3.进程常见退出方法 三、进程等待1.为什么要进行进程等待2.如何进行进程等待1.wait方法2.waitpid方法3.获取子进程status4.进程的阻塞等…...

用pip更新、安装python的包

查看pip的版本:python -m pip --version 例如,查看下pip的版本,在cmd下输入命令python -m pip --version,可以发现当前安装的pip的版本是23.2.1: 查看一个包的详情:python -m pip show 例如&#xff0c…...

spring boot 事件机制

目录 概述实践监听spring boot ready事件代码 源码初始化流程调用流程 结束 概述 spring boot 版本为 2.7.17 。 整体看一下spring及spring boot 相关事件。 根据下文所给的源码关键处,打上断点,可以进行快速调试。降低源码阅读难度。 实践 spring…...

分布式版本管理系统---->Git(Linux---centos(保姆式)讲解1)

文章目录: 1:什么是Git以及作用 2.Git的基本操作过程(创建git仓库,配置仓库的配置) 3.git的工作区,暂存区,版本库的关系 4.将文件添加到版本库:git add 与git commit -m命令 5.git log查看日志的引入 6.查看.git文件中的内容 7.修改文件内容查…...

B树你需要了解一下

介绍B树的度数主要特点应用场景时间复杂度代码示例拓展 介绍 B树(B-tree)是一种自平衡的树,能够保持数据有序,常被用于数据库和文件系统的实现。 B树可以看作是一般化的二叉查找树,它允许拥有多于2个子节点。与自平衡…...

MFC设置状态栏文本导致崩溃的原因

文章目录 问题和原因解决办法1.消息机制2.定时器问题和原因 本人在类A使用多线程执行操作并且调用了类B的设置状态栏文本的函数,导致崩溃 类A void A::distribute_n_start_msg(){((B*)m_parent)->received_msg_n_start...

配置typroa上传图片到gitee

一、gitee相关配置 到gitee官网创建一个新的仓库并获取其token gitee配置时候一定要新建仓库之后初始化好仓库 比如:创建出README.md文档 出现master这个显示界面,刚开始未初始化的时候是会报错的 二、typora相关配置 在typora这个位置下载插件 在p…...

java并发-线程生命周期

文章目录 前言状态图状态变化说明补充说明 前言 线程的生命周期指的是线程从创建出来到最终消亡的整个过程,以及过程中的状态变化。 状态图 以下图用mermaid语法绘制: #mermaid-svg-32vKT6KmFdlYvCnr {font-family:"trebuchet ms",verdana,…...

Javaweb之Vue路由的详细解析

5 Vue路由 5.1 路由介绍 将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级,其结构如下: 此时我们希望基于4.4案例中的功能,实现点击侧边栏的部门管理,显示部门管理的信息&am…...

力扣:196. 删除重复的电子邮箱(Python3)

题目: 表: Person ---------------------- | Column Name | Type | ---------------------- | id | int | | email | varchar | ---------------------- id 是该表的主键列(具有唯一值的列)。 该表的每一行包含一封电子邮件。电子邮件将不包含…...

Ruby和HTTParty库下载代码示例

ruby require httparty require nokogiri # 设置服务器 proxy_host "" proxy_port "" # 定义URL url "" # 创建HTTParty对象,并设置服务器 httparty HTTParty.new( :proxy > "#{proxy_host}:#{proxy_port}" ) …...

Unity 使用Horizontal Layout Group和Toggle制作多个水平开关按钮实现自动排列和单个点击放大后的自动排列。

Unity的布局组件Horizontal Layout Group是很好用的,当然也包括其它布局组件也一样好用。 比如要实现多按钮开关自动水平排列,那么就可以使用它了。 首先我们为按钮创建个父物体(我这里使用了Scroll View中的Content作为父物体)…...

Python实现FA萤火虫优化算法优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 萤火虫算法(Fire-fly algorithm,FA)由剑桥大学Yang于2009年提出 , …...

灯塔ARL-NPoC全面教程

灯塔ARL-NPoC全面教程 1.ARL-NPoC2.安装3.参数解析4.ARL-NPoC编写指南标准POC模板`__init()__`verifyexploit_cmd5.将指纹同步到远程Web服务器1.ARL-NPoC 最新版的arl增加了poc编写与探测的功能,ARL-NPoC是一个集漏洞验证和任务运行的一个框架 2.安装 ARL-NPoC下载地址 下载…...

λ表达式、智能指针

lambda 表达式 1、C11标准支持,实现匿名函数的功能; 2、通常用于实现轻量级的函数 格式 mutable->返回值{函数体}; // 返回值即使是 void 也必须得写 [] 内,可以填外部数据; () 内,可以带有参数列表。 lambda 表达…...

PHP基础知识和操作

PHP在线运行 https://c.runoob.com/compile/1/ https://www.sotool.net/php80 将驼峰字符串转化为蛇形字符串 <?phpfunction CamelToSnake($camelValue) {$initValue preg_replace(/\s/u, , $camelValue);$snakeValue strtolower(preg_replace(/(.)(?[A-Z])/u, &quo…...

系列十三、SpringBoot的自动配置原理分析

一、概述 我们知道Java发展到现在功能十分的强大&#xff0c;生态异常的丰富&#xff0c;这里面离开不了Spring及其家族产品的支持&#xff0c;而作为Spring生态的明星产品Spring Boot可以说像王者一般的存在&#xff0c;那么的耀眼&#xff0c;那么的光彩夺目&#xff01;那么…...

soapui报错: CXF directory must be set in global preferences

文章目录 下载官网下载网盘下载 配置 soapui生成代码时报错 CXF directory must be set in global preferences 下载 需要下载apache-cxf。 官网下载 官网地址&#xff1a; https://www.apache.org/dyn/closer.lua/cxf/3.5.4/apache-cxf-3.5.4.zip 点如下地址即可。 The obj…...

Netty02-基础概念

什么是netty ​ Netty是一个基于Java NIO的异步事件驱动网络应用程序框架。它提供了简单易用的API&#xff0c;用于快速开发可维护的高性能网络应用程序。Netty的设计目标是提供一种高度可扩展的、高性能的网络应用程序框架&#xff0c;使得开发人员能够轻松地构建各种类型的网…...

计算机毕业设计 基于SpringBoot的敬老院管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…...

精调llama模型

github地址&#xff1a;https://github.com/facebookresearch/llama-recipes github:https://github.com/facebookresearch/llama import torch from transformers import LlamaForCausalLM, LlamaTokenizer#model_id"./models_hf/7B" # 可以从huggingface上面下载模…...

【C语言】深入理解C语言中的数学运算和类型转换

文章目录 引言取负运算的奥秘源码探索分析与解读 浮点数运算的精细差异源码分析精度损失与隐式类型转换 精度和除零运算探究float类型和double类型的精度各是多少&#xff08;即十进制有效位的位数&#xff09;&#xff1f;在你的机器上&#xff0c;“负数开方”是如何处理的&a…...

基于javaweb的宠物服务商城系统设计与开发

摘 要 最近几年以来&#xff0c;宠物在人们的日常生活中所占的地位越来越重要了&#xff0c;它们不仅仅是我们的朋友&#xff0c;也成为了我们家庭中的一份子。21世纪&#xff0c;信息技术飞速发展&#xff0c;计算机行业日新月异&#xff0c;极大地带动了信息的流动&#xff…...

LeetCode-470. 用 Rand7() 实现 Rand10()【数学 拒绝采样 概率与统计 随机化】

LeetCode-470. 用 Rand7 实现 Rand10【数学 拒绝采样 概率与统计 随机化】 题目描述&#xff1a;解题思路一&#xff1a;首先说一个结论就是(rand_X() - 1) Y rand_Y() > [1,X*Y]&#xff0c;即可以等概率的生成[1, X * Y]范围的随机数&#xff0c;其实就像军训的时候报数…...

通达信指标公式19:龙虎榜股票池——主力控盘度的计算方法

0.小红牛本指标&#xff0c;选股的思路说明&#xff1a;控盘度&#xff0c;又称主力控盘&#xff0c;是指主力控制了某只股票的大部分流通股&#xff0c;从而控制了股票的价格。主力控盘的目的通常是为了获取更多的收益&#xff0c;通过控制股票价格来实现其策略。所以首要分析…...

做网站常规语言/seo推广网络

大家好&#xff0c;我是小马老师。 本文介绍lammps计算CNA的方法。 CNA&#xff08;公共邻居分析&#xff09;可用来分析原子周围局部晶体结构&#xff0c;如FCC、BCC、HCP以及晶体缺陷。 在ovito后处理软件中有CNA的计算&#xff0c;但这个计算在单个原子的体系比较准&#xf…...

盐城网站开发公司/市场推广渠道有哪些

.因为社区要加个bbs论坛&#xff0c;所以就当做练习&#xff0c;自己提前设计了一下数据库&#xff0c;由于经验有限&#xff0c;错误在所难免&#xff0c;还希望各位不吝赐教数据库的表如上图&#xff0c;我先把每个表都说明一下&#xff0c;UserInfo 记录用户的基本信息User…...

公司建设网站的申请报告/厨师培训

Boss的需要时这样的&#xff0c;Item是可变大小的&#xff0c;同时根据不同的Window size&#xff0c;来确定Item的结构和大小Window 小的时候是 大的时候是这样的&#xff1a; 当然这size变化的过程中也允许其他结构&#xff0c;我这里只是举了最大和最小时候的样子。 当拿到需…...

汕头个人网站建设/seo谷歌外贸推广

Launch 文件 1 使用Launch文件 2 创建Launch文件 3 在namespace中启动nodes 4 remapping names 5 其他的launch元素 1 使用launch文件 Launch文件是ROS提供的&#xff0c;可以同时运行多个nodes的文件。Launch文件以一种特殊的XML格式编写&#xff0c;在ROS packages中使用…...

江苏常州疫情最新消息/seo视频教程百度网盘

作者&#xff1a;文/虞子期我们都知道&#xff0c;一个星系所形成的“引力胶”力量大小&#xff0c;会跟该星系的质量有直接关系。当星系的质量越大&#xff0c;这股力量也就越强大&#xff0c;哪怕是移动速度最快的星系&#xff0c;也无法逃脱这些力量的牵引。早在 20世纪30年…...

如何在阿里巴巴建设网站/免费b站推广网站入口2020

名称 case - 跳转标记&#xff0c;在switch段内开启一个分支。 用法 case( : : Constant : ) 描述 case定义了一个switch段的跳转标记。 如果switch语句的控制表达式的值与Constant中定义的常量整数表达式相匹配&#xff0c;它将执行分支的内容。 对于这个参数&#xff0c;只接…...