浅了解一下『微前端』

1 什么是微前端

微前端的核心理念是将前端应用程序看作是一个整体,由多个独立的部分组成。每个部分被视为一个微前端应用,它们可以具有自己的技术栈、开发流程和团队组织。这种方式使得团队可以独立开发和部署各个子应用,减少了协调和合并的复杂性。

2 为什么使用微前端

为了解决团队平台系统多且相互独立,系统体量大且页面多,开发效率低、接入成本高。

当前应用痛点
在这里插入图片描述

  • 项目中的组件和功能模块会越来越多,导致整个项目的打包速度变慢;
  • 因为文件夹的数量会随着功能模块的增多而增多,查找代码会变得越来越慢;
  • 如果只改动其中一个模块的情况,需要把整个项目重新打包上线;
  • 所有的项目都基本只能使用同一技术框架,不便引入新技术栈。如:react、vue等。

3 微前端的特点

  • 技术栈无关 主框架不限制接入应用的技术栈,子应用可自主选择技术栈
  • 独立开发/部署 各个团队之间仓库独立,单独部署,互不依赖
  • 增量升级 当一个应用庞大之后,技术升级或重构相当麻烦,而微应用具备渐进式升级的特性
  • 独立运行时 微应用之间运行时互不依赖,有独立的状态管理
  • 提升效率 应用越庞大,越难以维护,协作效率越低下。微应用可以很好拆分,提升效率
    在这里插入图片描述

4 微前端方案

在这里插入图片描述

4.1 基于 iframe 完全隔离的方案

最早也是最熟悉的解决方案就是通过iframe

显著的优点
1.非常简单,无需任何改造
2.完美隔离,JS、CSS 都是独立的运行环境
3.不限制使用,页面上可以放多个 iframe 来组合业务

缺点非常突出
1.无法保持路由状态,刷新后路由状态就丢失
2.完全的隔离导致与子应用的交互变得极其困难,只能采用postMessage方式。
3.iframe 中的弹窗无法突破其本身
整个应用全量资源加载,加载太慢

在这里插入图片描述

4.2 基于 single-spa 路由劫持方案

qiankun 是一个基于 single-spa 的微前端实现库:qiankun文档

4.2.1 创建父子应用
vue create mian
vue create sbuapp
4.2.2 主应用安装qiankun
npm i qiankun -S
4.2.3 主应用配置

main.js:

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false//qiankun配置
import { registerMicroApps, start } from 'qiankun';//子应用列表
let apps = [
{
name:'subapp',
entry:'//localhost:8080',//子应用的地址,这里演示是本地启动的地址。
container:'#app',//子应用的容器节点的选择器(vue一般为app)
activeRule:'/subapp',//访问子应用的规则,比如:主应用为localhost:8081,那访问该子应用的url应为localhost:8081/subapp
}
]//注册子应用
registerMicroApps(apps);//启动
start();new Vue({
render: h => h(App),
}).$mount('#app')
4.2.4 子应用配置

根目录创建public-path.js文件
//public-path.js

if (window.POWERED_BY_QIANKUN) {
webpack_public_path = window.INJECTED_PUBLIC_PATH_BY_QIANKUN;
}

main.js:

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falselet instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时
if (!window.POWERED_BY_QIANKUN) {
render();
}export async function bootstrap() {
console.log('[vue] vue app bootstraped');
}
export async function mount(props) {
console.log('[vue] props from main framework', props);
render(props);
}
export async function unmount() {
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
}
4.2.5 本地启动主应用和子应用

这里先启动子应用,然后启动主应用,访问主应用OK:http://localhost:8084,然后著应用地址+/subapp 访问子应用:http://localhost:8084/subapp

跨域报错
解决跨域问题
qiankun官网早就给出来了 https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8
copy到子应用vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: ${name}-[name],
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
jsonpFunction: webpackJsonp_${name},

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

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

相关文章

【洛谷】进击的奶牛

进击的奶牛 题目链接 题意 输出相邻两头牛最大的最近距离 思路 运用二分的方法来查找最大的距离,由题意可知,我们最后输出的结果是区间的右边,即r 实现步骤 先用check函数来对距离判断,如果两头牛之间的距离大于了我们给定的距离…

java返给前端ECharts的格式2

java返给前端ECharts的格式2 1. 返回值:值对象(Value Object)1. 带LinkedHashMap的 key Value 格式的VO2. 带X轴和Y轴的VO3. 带标签的返回值 2. 业务对象BO:(Business Object)1. AreaBO2. AreaNameBO3. LegendAreaBO4.LegendNameBO5.NameBO 3. EChartsUt…

析构和友元函数

1. 类的析构函数 析构函数的作用,用于释放该类所占用的资源(或者说释放对象)在类的对象使用完时(当类的对象超出了作用域),会自动调用析构函数;如果是在堆区实例化的对象,那么当手动…

二分查找——OJ题(一)

📘北尘_:个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上,不忘来时的初心 文章目录 一、二分查找1、题目讲解2、算法原理3、代码实现 二、在排序数组中查找元素的第一个和最后一个…

Mini MyBatis-Plus(下)

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 最核心的内容前两篇已经…

docker 安装可视化工具 Protainer 以及 汉化

一、创建保存数据的卷 安装网址:Install Portainer BE with Docker on Linux - Portainer Documentation docker pull portainer/portainer二、根据portainer镜像创建容器 docker run -d -p 8000:8000 -p 9000:9000\ --name portainer --restartalways \ -v /var/r…

深入ArkUI:深入实战组件text和text input

文章目录 Text组件介绍Text组件的属性方法Text:文本显示组件4.3TextInput组件实战案例:图片宽度控制页面本文总结要点回顾在今天的课程中,我们将深入学习ArkUI提供的基础组件,着重探讨text和text input两个组件。 Text组件介绍 Text组件是一个用于显示文本的组件,其主要作…

VSCode安装Go环境

VSCode安装Go 1.点击Go官网,根据自己环境下载go安装包,我这里为Windows 2.双击安装包,一直点击【Next】即可 VSCode配置Go基础环境 1.创建Go的工作目录: C:\Code\GoCode 2.创建Go的环境变量: GOPATH (1)右键【此电脑】,点击…

C/C++转WebAssembly及微信小程序调用

上一篇文章讲了C/C如何转WebAssembly,并测试了在Web端调用。本篇内容和上篇一样,介绍C/C包转的.wasm包如何在小程序中调用。 说明 本篇是在上一篇步骤1-4的基础上,再做修改,供微信小程序端调用的方法和步骤。 本篇操作手册可以…

Python自动化测试:选择最佳的自动化测试框架

在开始学习python自动化测试之前,先了解目前市场上的自动化测试框架有哪些? 随着技术的不断迭代更新,优胜劣汰也同样发展下来。从一开始工具型自动化,到现在的框架型;从一开始的能用,到现在的不仅能用&…

鸿蒙问题之本地模拟器无法识别

今天按例打开本地模拟器,发现DevEco Studio不能检测到我的本地模拟器了。 重启了DevEco Studio和模拟器多次都无果。果断删除模拟器 然后创建一个新的,就可以成功检测到了。这应该是idea的一个bug

关于python解析mf4中二维信号数据的注意事项

python解析mf4中的信号数据一般用np.ndarray存储,但是mf4中的一个信号有时不一定是一维数据,有时会是一个二维的,没错,就是一个信号数据就是二维的,这时候,np数组的每个元素也是一个数组,这个时…

整数除法相关用法:floor、ceil、round

整数除法——舍小数&#xff0c;取整数 1.floor()头文件<math.h> 功能&#xff1a;把一个小数向下取整&#xff0c;即就是如果数是2.2 &#xff0c;那向下取整的结果就为2.000000 原型&#xff1a;double floor(doube x); x : 是需要计算的数 返回值&#xff1a; 成…

【揭秘】如何制作推拉门电子画册,轻松成为行业大咖!

​在当今数字化时代&#xff0c;电子画册已成为企业展示产品、服务的重要手段。与传统印刷画册相比&#xff0c;电子画册具有诸多优势&#xff0c;如易于传播、易于更新、环保低碳等。更重要的是&#xff0c;通过电子画册&#xff0c;企业可以更好地与目标受众互动&#xff0c;…

K8s - Helm、HPA、rancher

目录 1、什么是 Helm 2、Helm 部署 3、Helm 自定义模板 4、Helm 仓库 5、HPA 6、部署 metrics-server 7、Rancher 管理 Kubernetes 集群 8、Rancher 安装及配置 1、什么是 Helm 在没使用 helm 之前&#xff0c;向 kubernetes 部署应用&#xff0c;我们要依次部署 depl…

天津医科大学临床医学院专升本药学专业有机化学考试大纲

天津医科大学临床医学院高职升本科专业课考试大纲药学专业《有机化学》科目考试大纲 一、考试基本要求 本考试大纲主要要求考生对《有机化学》基本概念有较深入的了解&#xff0c;能够系统地掌握各类化合物的命名、结构特点及立体异构、主要性质、反应、来源和合成制备方法等…

SQL面试题挑战11:访问会话切割

目录 问题&#xff1a;SQL解答&#xff1a; 问题&#xff1a; 如下为某电商公司用户访问网站的数据&#xff0c;包括用户id和访问时间两个字段。现有如下规则&#xff1a;如果某个用户的连续的访问记录时间间隔小于60秒&#xff0c;则属于同一个会话&#xff0c;现在需要计算每…

相对于一般的统计学,计量经济学的特色是什么?谈Stata与计量经济学

Stata作为一种数据分析软件&#xff0c;高度适用于依托计量经济学的研究领域&#xff0c;如宏观经济学、财政学等&#xff0c;当然在医学等学科应用也较为广泛&#xff0c;在处理面板数据方面也深具特色。计量经济学是指运用概率统计方法对经济变量之间的因果关系进行定量分析的…

idea的pom.xml文件灰色删除线解决办法

以上是点击了移除module后就变成这样 如果再次对着已移除的module右键会发现有个delete&#xff0c;点击这个是真删了&#xff0c;要谨慎备份哦 解决方案&#xff1a;恢复误操作remove module的解决方法 idea最右边&#xff0c;有个Maven控件&#xff0c;找到要恢复的module&a…

vscode连接linux服务器

目录 下载vscode&#xff0c;这是微软开源软件&#xff0c;打开后到下载扩展页面 在下载扩展页面下载中文和ssh远程连接扩展 安装后会在左边新生成一个图标点击齿轮 选择第一个 配置连接信息 远程隧道右边刷新&#xff0c;等刷出来hostname的主机后 连接ip出来后&#x…