谈谈微前端

相关问题

  • 为什么要用微前端
  • 微前端的优缺点

回答关键点

独立开发 独立运行 独立部署 自治

微前端是一种架构理念,它将较大的前端应用拆分为若干个可以独立交付的前端应用。这样的好处是每个应用大小及复杂度相对可控。在合理拆分应用的前提下,微前端能降低应用之间的耦合度,提升每个团队的自治能力。

目前市面有各类不同的微前端方案,但没有完美的解决方案。微前端方案通常需要考虑:应用加载机制、通信机制、代码隔离机制等问题。

知识点深入

在这里插入图片描述

微前端使用场景

前端工程化中,一个前端项目常以组件模块的粒度进行代码拆分,然后通过 script 标签、npm 包、submodules 或者动态加载(Dynamic import)等形式将代码集成到项目中。而微前端则是以更大的粒度对代码进行上下文划分,将较庞大的应用拆分成多个技术栈独立的应用,再通过技术手段将若干应用集成在一个容器内。

如果项目中存在以下问题,可参考微前端架构进行优化:

  • 存量系统如何渐进式地拥抱新技术:存量系统的技术栈老旧,重构和开发成本高。在做新的功能开发时可以考虑采用与老项目不同的技术栈,通过微前端的方案将新的功能与老系统进行集成。同时微前端架构也给老旧系统的技术升级和平滑迁移提供保障。
  • 大型系统的开发及沟通成本上升:通过分析业务功能,将系统拆分成多个独立子系统,使每个子系统能独立开发、运行及部署。将工程复杂度拆分并限制在子系统单元内。避免随需求迭代,项目维护成本增大,跨部门沟通困难导致效率低下等问题。

微前端部分核心能力

  1. 路由管理

    一般我们使用 Hash 或者 History 模式来对路由进行监听,如 hashchangepopstate 事件。

    目前常见的微前端解决方案主要是路由驱动的。在微前端的基座,进行子应用的路由注册,如 { path: '/microA/*' } ,基座根据路由匹配情况,按需挂载子应用。具体路由跳转规则由子应用接管响应。

  2. 隔离机制

    支持样式隔离和 JS 沙箱机制,以保证应用之间的样式或全局变量、事件等互不干扰。在应用卸载时,应当对子应用中产生的事件、全局变量、样式表等进行卸载

    对于新的项目,做好样式隔离的方式包括采用 CSS Module、CSS in JS规范使用命名空间等。对于已有项目的 CSS 隔离,可以在打包阶段利用工具(如 postcss)自动对样式添加前缀

    实现 JS 沙箱机制可以借助 Proxy 和 with 的能力,分别做对 Window 对象的访问进行拦截和修改子应用作用域的操作。不支持 Proxy 的宿主环境,可以采用快照的思路:对进入子应用前的 Window 对象进行快照,用于后续卸载子应用时还原 Window 对象;在卸载子应用时对 Window 对象进行快照,用于后续再次加载子应用时还原 Window 对象。

  3. 消息通信

    合理划分应用,可以避免频繁的跨应用通信。同时应当避免子应用之间直接通信

    常见的消息通信机制可以通过原生 CustomEvent 类实现,子应用通过 dispatchEvent 和 addEventListener 来对自定义事件进行下发和监听。除此之外,借助 props 通过主应用向子应用传参,达到通信目的也是常见方法

  4. 依赖管理

    常见的微前端框架中,基座应用统一对子应用的状态进行管理。根据路由和子应用状态,按需触发生命周期函数,做请求加载、渲染、卸载等动作。而多个子应用间可能存在一些公共库的依赖。

    为减少这类资源的重复加载,通常可以借助 webpack5 的 Module Federation 在构建时进行公共依赖的配置,实现运行时依赖共享的能力。除了使用打包工具的能力,也可以从代码层面通过实现类 external 功能对公共依赖进行管理。

关联技术

  1. Web Components
    Web Components 允许开发者不借助框架,实现一些可重用的自定义组件。构建一个 Web Components 通常使用到 customElements、Shadow DOM 的 API,和 templates、slot 标签

    基于 Web Components 开发,可以天然契合微前端的一些特性:技术栈无关,应用间隔离。但兼容性较差,不支持 IE。

  2. iframe
    iframe 常用于将应用嵌入另一个宿主应用中。这其实已经是一种微前端的思维。只使用 iframe 方案引入子应用的好处是浏览器兼容性强,接入成本低,样式及脚本天然隔离。但是由于 iframe 和宿主应用完全隔离,各自独立运行,导致了诸多限制,如:

  • 资源无法共享;
  • iframe 中的 UI 无法跨越 iframe 窗口边界;
  • 刷新页面时 iframe 中的路由状态丢失;

目前腾讯提供了一个新的微前端实施思路:借助 ShadowRoot 渲染子应用的 DOM;iframe 负责运行子应用的 JavaScript 代码,从而实现 JS 沙箱和 CSS 隔离能力。另外,在保证子应用和主应用同源的前提下,将子应用的路由变化同步到主应用中,从而保证刷新页面后,路由地址正常。

  1. webpack5 Module Federation
    目前市面上的微前端方案中,有基于 Module Federation 的微前端框架实践。Module Federation 是 webpack 提供的一个插件,他支持通过配置以下核心参数,在打包构建阶段确定集成策略
  • exposes 参数,指定应用可以描述当自己作为被加载的远程模块时,可暴露给其他应用使用的模块路径。
  • remotes 参数,指定应用可以从远端加载的远程模块地址。
  • shared 参数,指定应用可以与其他远程模块共享的依赖(精确到版本)。

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

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

相关文章

基于监控视频的车辆检测

目前常用的基于监控视频的车辆检测方法分为两类:基于运动信息的车辆检测方法和基于特征信息的车辆检测方法。基于运动信息的车辆检测方法主要包括光流法、帧差法和背景法等。基于特征的车辆检测,是以统计机器学习理论为基础的车辆检测方法,通…

Java面试题:描述Java 14中的模式匹配及其使用场景

Java 14是继Java 12和Java 13之后,继续引入了模式匹配作为预览特性的版本。模式匹配是一种新的语法结构,用于简化对象的比较和类型检查,它可以在instanceof表达式和switch语句中使用。模式匹配的目的是提高代码的可读性和简化复杂的条件语句。…

提升和改善学习效率和记忆力

提升和改善学习效率和记忆力是一个多方面的过程,需要综合考虑方法、食物、生活习惯等多个方面。以下是一些具体的建议: 一、方法篇 设定明确的学习目标:清晰的目标有助于你集中注意力,更有效地利用学习时间。采用多样化学习方式…

【二分查找】Leetcode 34. 在排序数组中查找元素的第一个和最后一个位置【中等】

在排序数组中查找元素的第一个和最后一个位置 给你一个按照非递减顺序排列的整数数组 nums,和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target,返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(…

SRE职能描述以及个人见解

1.SRE 职能描述 SRE 到底是什么?这是一个最早由 Google 提出的概念,我的理解是,用软件解决运维问题。标准化,自动化,可扩展,高可用是主要的工作内容。这个岗位被提出的时候,想解决的问题是打破…

【Java基础学习】面向对象编程

开始时间: April 10, 2024 结束时间: April 16, 2024 阶段: Done 基础部分 类与对象的关系 类是抽象的,概念的,代表一类事物对象是具体的,实际的,代表一个具体事物(实例)类是对象的模板,对象…

JSON基础入门

简介: JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,通常用于在不同系统之间进行数据交换。它基于JavaScript语言的子集,但已成为独立于语言的格式,因此可以通过多种编程语言进行解析和生成。 JSON的…

Python 数学应用(四)

原文:zh.annas-archive.org/md5/123a7612a4e578f6816d36f968cfec22 译者:飞龙 协议:CC BY-NC-SA 4.0 第十一章:其他主题 在本章中,我们将讨论一些在本书前几章中没有涉及的主题。这些主题大多涉及不同的计算方式以及优…

什么是三高架构

三高架构是指在软件系统设计与开发中,注重解决高并发性、高可用性和高性能的架构设计模式。 高并发性:指系统能够处理大量并发请求的能力。在高并发场景下,系统需要具备有效的并发处理机制,以保证系统能够快速、准确地响应大量并…

【jquery】jquery使用Recorder.js实现录音并上传,调用阿里云接口语音转文字

阿里一句话识别语音数据时长不能超过60s。参考文档 实现功能&#xff1a; 1.点击拾音按钮开始录音&#xff0c;点击结束按钮结束录音并调取后台语音转文字接口 2.录音时长超过60s自动结束录音并调取后台语音转文字接口 <!-- 引用recorder插件 --> <script type"t…

记录-海思开发板的 嵌入式nginx和 php的移植(交叉编译环境配置)

嵌入式 lnmp搭建的记录 N&#xff1a;NginxP&#xff1a;php编译PHP可能遇到的问题configure阶段&#xff1a;Makefile-make阶段&#xff1a;Makefile-make install阶段&#xff1a; 文章比较水&#xff0c;并没有没解决什么实际问题&#xff0c;有点不好意思发布。但好像又记录…

Python 数据结构和算法实用指南(三)

原文&#xff1a;zh.annas-archive.org/md5/66ae3d5970b9b38c5ad770b42fec806d 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第七章&#xff1a;哈希和符号表 我们之前已经看过数组和列表&#xff0c;其中项目按顺序存储并通过索引号访问。索引号对计算机来说很有效…

安装 k8s集群的问题:默认容器运行时从 Docker 改为 Containerd

安装 k8s集群的问题&#xff1a;默认容器运行时从 Docker 改为 Containerd 1、背景2、容器运行时从 Docker 改为 Containerd2.1、安装 Containerd&#xff1a;2.2、生成 Containerd 的配置文件2.3 、创建 /etc/crictl.yaml 文件2.4 、配置 Containerd 服务开机自启 &#x1f49…

[c++][netcdf]通过c\c++读取字段的scale_factor与add_offset

函数&#xff1a;c void readScaleAndOffset(const char* FileName,const char* VarName) {NcFile dataFile(FileName, NcFile::read);NcVar Varf dataFile.getVar(VarName);//查看维度cout << "XSizef" << Varf.getDim(0).getSize() << endl;co…

安全认证Kerberos详解

文章目录 一、Kerberos入门与使用1、Kerberos概述1.1 什么是Kerberos1.2 Kerberos术语1.3 Kerberos认证原理 2、Kerberos安装2.1 安装Kerberos相关服务2.2 修改配置文件2.3 其他配置与启动 3、Kerberos使用概述3.1 Kerberos数据库操作3.2 Kerberos认证操作 二、Hadoop Kerberos…

海外仓管理系统的“实用性”讨论:没办法自由设置信息的,都是伪功能

和很多经营海外仓的企业都聊过这样一个问题&#xff1a;对于海外仓的管理系统&#xff0c;到底什么样的设计&#xff0c;什么样的功能才是真的有价值的。 那这就不得不说到一个概念&#xff1a;自由性。什么意思呢&#xff0c;海外仓看似都一样&#xff0c;大家都在经营仓储、…

亚信安慧AntDB:数据驱动的决策力量

亚信安慧AntDB数据库在运营商自主可控替换项目中的成功应用&#xff0c;具有极其重要的意义。该数据库的落地&#xff0c;不仅为这一项目注入了强大的支持力量&#xff0c;还在更大程度上提升了整体的运营效能。作为一种高效可靠的数据库解决方案&#xff0c;AntDB引入了先进的…

ppt里的音乐哪里来的?

心血来潮&#xff0c;想照着大神的模板套一个类似于快闪的ppt。 ppt里是有一段音乐的&#xff0c;那段音乐就是从幻灯片第二页开始响起的。 但是我就找不到音乐在哪。 甚至我把ppt里的所有素材都删除了&#xff0c;再看动画窗格&#xff0c;仍然是空无一物&#xff0c;显然&…

研究表明,全球互联网流量竟有一半来自机器人

据Cyber News消息&#xff0c;Thales Imperva Bad Bot近期做了一份报告&#xff0c;显示在2023年有49.6%的互联网流量竟来自机器人&#xff0c;比上一年增长 2%&#xff0c;达到自2013年以来观察到的最高水平。 报告称&#xff0c;这一趋势正对企业组织产生负面影响&#xff0c…

Oracle 正则,开窗,行列转换

1.开窗函数 基本上在查询结果上添加窗口列 1.1 聚合函数开窗 基本格式: ..... 函数() over([partition by 分组列,...][order by 排序列 desc|asc][定位框架]) 1&#xff0c;partition by 字段 相当于group by 字段 起到分组作用2&#xff0c;order by 字段 即根据某个字段…