微前端架构新选择:micro-app 框架一文全解析

在这里插入图片描述


目录


前言

https://micro-zoe.github.io/micro-app/

micro-app 是由京东前端团队推出的一款微前端框架,它借鉴了 WebComponent 的思想,通过 js沙箱样式隔离元素隔离路由隔离 模拟实现了 ShadowDom 的隔离特性,并结合 CustomElement 将微前端封装成一个类 WebComponent 组件,从而实现微前端的组件化渲染,旨在降低上手难度、提升工作效率。

micro-app 与技术栈无关,也不和业务绑定,可以用于任何前端框架。

技术方案

https://juejin.cn/post/7236021829000691771

https://juejin.cn/post/7309477710523269174

  • 主应用引入框架 Micro App,通过链接加载子应用,双方状态隔离,互不影响

沙箱

MicroApp 有两种沙箱方案:with沙箱iframe沙箱

默认开启 with沙箱,如果 with沙箱 无法正常运行,可以尝试切换到 iframe沙箱,比如 vite。

with

with 沙箱通常是指使用 JavaScript 的 with 语句来创建一个新的作用域。这种方法在现代开发中不推荐使用,因为它可能导致代码难以阅读和维护、作用域不明确、调试困难、全局变量污染,而且 with 语句在严格模式下是不被允许的。

const microApp = {data: {message: 'Hello from MicroApp'},logMessage() {with(this.data) {console.log(message);}}
};microApp.logMessage(); // 输出: Hello from MicroApp

iframe

iframe 沙箱是一种更为常见的隔离技术,通过在 HTML 中使用 <iframe> 标签来嵌入微应用。每个 <iframe> 都有自己独立的全局作用域,这意味着 JavaScript 变量和 DOM 不会泄露到宿主应用中。

子应用的执行 js 脚本会被 micro 拿出来放到 iframe 进行执行,一般只会加载 样式文件。

环境变量

子应用可以通过一些 window 注入的全局变量来判断当前加载的状态如何:

  • __MICRO_APP_ENVIRONMENT__(是否在微前端环境中)
  • __MICRO_APP_NAME__(获取应用在 micro-app 挂载的值)
  • __MICRO_APP_BASE_ROUTE__(子应用的基础路由路径)
  • __MICRO_APP_BASE_APPLICATION__(判断当前是否是主应用,执行 microApp.start 之后生效)
  • rawWindow(子应用获取主应用的执行 window 上下文)
    • 主应用的 window 内部包含子应用的 window,默认是 window[0] window[1] window[2]。
    • 但是这个包含的 window 被注入了一些方法和变量,所以和原本的不一致了。
  • rawDocument(子应用获取主应用的执行 document 结构)

主应用生命周期

  1. created: 标签初始化后,加载资源前触发。
  2. beforemount:加载资源完成后,开始渲染之前触发。
  3. mounted:子应用渲染结束后触发。
  4. unmount:子应用卸载时触发。
  5. error:子应用加载出错时触发,只有会导致渲染终止的错误才会触发此生命周期。
  • 开启缓存前,先触发123,切换触发4,返回接着触发123
  • 开启keep-alive后,应用卸载时会进入缓存,而不是销毁它们,以便保留应用的状态和提升重复渲染的性能。先触发123,切换不触发,返回触发1

子应用生命周期

初始化

更新

卸载

缓存

  • 开启缓存后,子应用无需重复上述的渲染过程

JS 沙箱

https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/sandbox

  • 通过自定义的window、document拦截子应用的JS操作,放在 iframe 执行,实现一个相对独立的运行空间,避免全局变量污染,让子应用进行独立运行
  • 后续出一篇文章,分析 iframe webcomponent 内部执行原理

样式隔离

micro-app[name=my-app1] .main .title

  • 一般情况下,子应用不开启 scoped 进行隔离,主应用会加上 micro-app[name=my-app1] 进行样式标识
  • 如果主应用的样式在全局下面,不开启 micro 的话,很可能会影响到子应用的原始样式
  • 默认下样式隔离是开启的,也可以在应用、文件、行进行禁用操作

元素隔离

【小程序 - 大智慧】Expareser 组件渲染框架_exparser框架-CSDN博客

  • 元素的隔离来自 Shadow Dom,元素不会逃离 <micro-app> 元素边界,子应用只能对自身的元素进行增、删、改、查的操作。
  • 微前端下主应用拥有统筹全局的作用,可以获取子应用的元素。
  • 自定义了 micro-app-headmicro-app-body 等 Web Component 组件进行隔离。

路由系统⭐

拦截浏览器路由事件以及自定义的 locationhistory,实现了一套虚拟路由系统,子应用运行在这套虚拟路由系统中,和主应用的路由进行隔离,避免相互影响

  1. search 是默认模式,子应用的路由信息会作为 query 参数同步到浏览器地址上。
  2. native 子应用和主应用共同基于浏览器路由进行渲染,但是配置更加复杂。
  3. native-scope 相比于 native,子应用的域名指向自身而非主应用。
  4. pure 模式是指子应用独立于浏览器路由系统进行渲染,即不修改浏览器地址,也不增加路由堆栈。
  5. state 模式是指基于浏览器 history.state 进行渲染的路由模式,在不修改浏览器地址的情况下模拟路由行为,可以增加路由堆栈。
  6. 路由系统和 vue-router 大差不差,具体包含了应用跳转、拦截、配置、路径解析等。

数据通信⭐

MicroApp

主应用和子应用之间的通信是绑定的,主应用只能向指定的子应用发送数据,子应用只能向主应用发送数据,这种方式可以有效的避免数据污染,防止多个子应用之间相互影响。

  1. 全局通信
  2. 主 <=> 子通信
  3. 无论是通信还是接收数据,发送数据是异步执行的,多个请求会在下一帧合并为一次执行。默认数据都是走缓存的,如果 keyvalue 值都一样就不会发送,后续的数据请求会和之前的进行合并,然后一起发送过去。最后,当子应用卸载时,要注意通信的数据会被缓存,可能会导致一些困扰,此时可以主动清空缓存数据来解决。

资源系统

// 方式一:excludeAssetFilter
import microApp from '@micro-zoe/micro-app'microApp.start({excludeAssetFilter (assetUrl) {if (assetUrl === 'xxx') {return true // 返回true则micro-app不会劫持处理当前文件}return false}
})// 方式二:配置 exclude 属性
<link rel="stylesheet" href="xx.css" exclude>
<script src="xx.js" exclude></script>
<style exclude></style>

https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/static-source

  • 自动补全:对子应用相对地址的资源路径进行补全。
  • 资源共享:当子应用加载相同地址的 jscss 资源时,会直接从缓存中提取数据,从而提升渲染速度。
  • 资源过滤:对于共享的资源使用 exclude 不加载,excludeAssetFilter 指定部分特殊的动态加载的微应用资源(css/js)不被 `

预加载

预加载是指在子应用尚未渲染时提前加载静态资源,从而提升子应用的首次渲染速度。为了不影响主应用的性能,预加载会在浏览器空闲时间执行。

microApp.preFetch([{ name: 'my-app1', url: 'xxx' }, // 加载资源并解析{ name: 'my-app2', url: 'xxx', level: 1 }, // 只加载资源{ name: 'my-app3', url: 'xxx', level: 3 }, // 加载资源、解析并渲染{ name: 'my-app4', url: 'xxx', level: 3, 'default-page': '/page2' }, // 加载资源、解析并渲染子应用的page2页面
])

umd 模式

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import routes from './router'
import App from './App.vue'let app = null
let router = null
let history = null
// 👇 将渲染操作放入 mount 函数,子应用初始化时会自动执行
window.mount = () => {history = createWebHistory()router = createRouter({history,routes,})app = createApp(App)app.use(router)app.mount('#app')
}// 👇 将卸载操作放入 unmount 函数,就是上面步骤2中的卸载函数
window.unmount = () => {app.unmount()history.destroy()app = nullrouter = nullhistory = null
}// 如果不在微前端环境,则直接执行mount渲染
if (!window.__MICRO_APP_ENVIRONMENT__) {window.mount()
}
  • 默认模式:初次渲染和后续渲染时会顺序执行所有 js,以保证多次渲染的一致性。
  • umd 模式:子应用定义 mountunmount 方法,此时只在初次渲染时执行所有 js,后续渲染只会执行这两个方法,在多次渲染时具有更好的性能和内存表现。

其他功能

  1. 支持多层嵌套,A 嵌套 B,B 嵌套 C,需要按照规定进行配置。
  2. 插件系统可以对全局和单独应用的 js 处理规则进行修改,因为默认在沙箱中,顶层的变量是无法泄漏为全局变量的(如 var xx =, function xxx 定义变量,无法通过 window.xx 访问),导致 js 报错。
  3. 通过自定义 fetch 替换框架自带的 fetch,可以修改 fetch 配置(添加 cookie 或 header 信息等等),或拦截 HTML、JS、CSS 等静态资源。

调试工具

MicroApp

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

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

相关文章

基于springboot美食商城推荐系统

基于springboot美食商城推荐系统 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;idea 源码获取&#xff1a;https://downlo…

iOS调试真机出现的 “__llvm_profile_initialize“ 错误

一、错误形式&#xff1a; app启动就崩溃&#xff0c;如下&#xff1a; Demo__llvm_profile_initialize:0x1045f7ab0 <0>: stp x20, x19, [sp, #-0x20]!0x1045f7ab4 <4>: stp x29, x30, [sp, #0x10]0x1045f7ab8 <8>: add x29, sp, #0x100x1…

java写一个MD5加密工具

下面是一个简单的 Java MD5 加密工具的实现。这个工具可以用于对输入的字符串进行 MD5 加密&#xff0c;并返回加密后的结果。 MD5 加密工具类 import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;public class MD5Util {/*** 使用 MD5 算法加…

SELinux中的安全标记与强制访问控制

SELinux的安全标记和强制访问控制是如何实现的&#xff1f; SELinux&#xff08;Security Enhanced Linux&#xff09;是一个由美国国家安全局&#xff08;NSA&#xff09;开发的Linux内核模块&#xff0c;它实现了强制访问控制&#xff08;MAC&#xff09;。SELinux通过为系统…

工伤认定流程和赔付标准

一、应当认定为工伤的规定 《工伤保险条例》第十四条规定&#xff1a;职工有下列情形之一的&#xff0c;应当认定为工伤&#xff1a; 1、在工作时间和工作场所内&#xff0c;因工作原因收到事故伤害的&#xff1b; 2、工作时间前后在工作场所内&#xff0c;从事与工作有关的预…

第10节 arkTS GridRow

在 ArkTS 中&#xff0c; GridRow 是 Grid 布局系统中的一个重要组成部分&#xff0c;用于定义网格布局中的行。以下是关于 GridRow 的详细介绍&#xff1a; 基本概念 Grid 布局将容器划分为行和列的网格结构&#xff0c; GridRow 则负责确定每行的属性和布局方式。…

物联网平台是什么?

在数字化时代&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;已经成为推动社会进步和产业升级的重要力量。物联网平台&#xff0c;作为连接物理世界与数字世界的桥梁&#xff0c;正逐渐成为智能设备、数据和服务的中心枢纽。本文将带你深入了…

Mochi 1视频生成模型亮相:动作流畅,开放源代码

前沿科技速递&#x1f680; 近日&#xff0c;AI公司Genmo发布了最新的开源视频生成模型Mochi 1。Mochi 1在动作质量和提示词遵循能力方面有显著提升&#xff0c;并且与市面上许多闭源商业模型相媲美。作为一款支持个人和商业用途的开源工具&#xff0c;Mochi 1不仅展示了开源技…

UEFI EDK2框架学习 (四)——UEFI图形化

一、修改protocol.c #include <Uefi.h> #include <Library/UefiLib.h> #include <Library/UefiBootServicesTableLib.h> #include <stdio.h>EFI_STATUS EFIAPI UefiMain(IN EFI_HANDLE ImageHandle,IN EFI_SYSTEM_TABLE *SystemTable ) {EFI_STATUS S…

使用 EasyExcel 相邻数据相同时行和列的合并,包括动态表头、数据

前言 在处理 Excel 文件时&#xff0c;经常会遇到需要对表格中的某些单元格进行合并的情况&#xff0c;例如合并相同的行或列。Apache POI 是一个强大的工具&#xff0c;但它使用起来相对复杂。相比之下&#xff0c;EasyExcel 是一个基于 Apache POI 的轻量级 Excel 处理库&am…

软考中级网络工程师,快背,都是精华知识点!

一、上午常考概念 计算机硬件基础&#xff1a;根据考纲分析&#xff0c;本章主要考查三个模块&#xff1a;计算机体系结构、存储系统、I/O输入输出系统&#xff0c;其中每一模块又分若干知识点。“计算机硬件基础”相当于软考中的“公共基础课”&#xff0c;不同方向、不同级别…

初始JavaEE篇——多线程(2):join的用法、线程安全问题

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 模拟实现线程中断 join的用法 线程的状态 NEW&#xff1a; RUNNABLE&#xff1a; TIMED_WAITING&#xff1a; TERMINATED…

系统架构图设计(轻量级架构)

轻量级架构一般包括&#xff1a;表现层、业务逻辑层、持久层、数据库层 表现层架构 MVC 模型&#xff08;Model&#xff09;&#xff1a;应用程序的主体部分&#xff0c;表示业务数据和业务逻辑视图&#xff08;View&#xff09;&#xff1a;用户看到并与之交流的界面控制器&…

ESP32 S3 怎么开发基于ESP-RTC的音视频实时交互的应用,用语AI陪伴的领域

在ESP32-S3平台上开发基于ESP-RTC的音视频实时交互应用&#xff0c;尤其是在AI陪伴领域&#xff0c;涉及到音视频数据的采集、编码、传输和解码。ESP32-S3 具备较强的处理能力&#xff0c;且拥有丰富的接口和模块支持&#xff0c;可以用来实现这种功能。以下是一个完整的开发方…

【操作系统】Linux之进程管理二

第1关&#xff1a;进程等待 if(wait(&status) ! -1) { if(WIFEXITED(status)) status WEXITSTATUS(status); else status -1; } else { status -1; } 第2关&#xff1a;进程创建操作-exec函数族 void execlProcess() { pid_t pid vfork(); if(pid -1) { printf("…

Lim测试平台,五步完成批量生成数据

一、前言 在日常的测试工作中&#xff0c;我们常常需要生成大量的数据&#xff0c;例如为了测试分页功能、进行性能压力测试或准备测试所需的数据集。 虽然可以通过编写脚本或者使用如JMeter这样的工具来完成这些任务&#xff0c;但在团队合作的情境下&#xff0c;这种方法存…

打造通往自由的交易系统与策略——《以交易为生》读后感

我们知道要顺势而为&#xff0c;可什么是“势”&#xff1f;交易市场就像一片汪洋大海&#xff0c;潮起潮落的背后&#xff0c;有一套可以捕捉趋势的规律。要想看到势&#xff0c;就像软件工程中的可观测性&#xff0c;要找到合适的工具和指标&#xff0c;才能发现市场中重要的…

【云从】十、常见安全问题与云计算的计费模式

文章目录 1、常见安全问题1.1 DDoS攻击1.2 病毒攻击1.3 木马攻击1.4 代码自身漏洞 2、安全体系3、云计算的计费模式4、常见云产品的计费方案5、云产品计费案例 1、常见安全问题 1.1 DDoS攻击 通过分布在各地的大量终端&#xff0c;同时向目标发送恶意报包&#xff0c;以占满目…

微信小程序版本更新管理——实现自动更新

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

图表设计中文本的字体、大小与颜色

在创建图表时&#xff0c;我们往往过分关注图形的设计而忽视了文本的重要性。文本在图表中扮演着至关重要的角色&#xff0c;它不仅辅助图形具象化地展示数据&#xff0c;更是图表真实性和可靠性的关键。然而&#xff0c;很多人在设计图表时&#xff0c;并没有考虑到字体的选择…