当前位置: 首页 > 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 表达…...

华为云AI开发平台ModelArts

华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...