knowledge-微前端(多个前端应用聚合的一个应用架构体系,每个小的应用可独立运行,独立开发,独立部署上线)

1.前言

        微前端,将一个大的前端应用拆分为多个小型的,独立开发的前端应用,每一个小型的应用都可以单独的开发,部署和运行。这种结构允许不同的团队使用不同的技术栈来开发应用的不同部分,提高开发的效率与灵活性。

2.实现微前端

利用现有的微前端框架来进行实现

2.1蚂蚁金服-微前端乾坤(qiankun)
乾坤继承single-spa:
  • 微应用独立部署
  • 延迟加载
  • 技术无关

乾坤提供:

  • HTML入口访问模式
  • 样式隔离
  • JS沙箱
  • Umi插件继承 

具体使用,参考乾坤官方项目文档使用 

GitHub - umijs/qiankun: 📦 🚀 Blazing fast, simple and complete solution for micro frontends.

2.2 腾讯开源基于webComponents和iframe-微前端无界(wujie)

        无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。

        Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦

原生隔离 

  •         css 样式通过 Web Components 可以做到严格的原生隔离
  •         js 运行在 iframe 中做到严格的原生隔离

功能强大

  •         支持子应用嵌套
  •         支持多应用激活
  •         支持应用共享
  •         支持生命周期钩子
  •         支持插件系统
  •         支持 vite 框架.....等

具体使用参考官网项目文档使用

https://github.com/Tencent/wujie

3.参考

        仅做学习记录,博客参考

https://juejin.cn/post/7304946949940674587?searchId=20250320100915C3170A62AD017E14E75Dhttps://juejin.cn/post/7304946949940674587?searchId=20250320100915C3170A62AD017E14E75D

微前端框架之乾坤【qiankun】 vue3+vite+qiankun(手把手搭建版)_乾坤框架-CSDN博客文章浏览阅读1.1w次,点赞58次,收藏53次。简介:qiankun是一种微前端框架,可以将多个前端应用集成为一个整体。每个子应用可以使用不同的框架和技术栈,它们之间可以相互独立开发和部署,qiankun提供了一套完整的生命周期函数和通信机制,可以让不同的子应用之间进行跨框架和跨域的通信和交互。_乾坤框架 https://blog.csdn.net/m0_51400948/article/details/140438945?fromshare=blogdetail&sharetype=blogdetail&sharerId=140438945&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link

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

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

相关文章

工厂函数详解:概念、目的与作用

一、什么是工厂函数? 工厂函数(Factory Function)是一种设计模式,其核心是通过一个函数来 创建并返回对象,而不是直接使用 new 或构造函数实例化对象。它封装了对象的创建过程,使代码更灵活、可维护。 二、…

旋转位置编码(Rotary Positional Encoding, RoPE):中文公式详解与代码实现

旋转位置编码(Rotary Positional Encoding, RoPE):中文公式详解与代码实现 在序列模型中,位置信息对于任务的理解至关重要。传统的绝对和相对位置编码各有优缺点,而RoPE作为一种创新的位置编码方法,展现了…

C语言-指针变量和变量指针

指针 预备知识 内存地址 字节:字节是内存的容量单位,英文名Byte,1Byte8bits 地址:系统为了便于区分每一个字节面对它们的逐一进行编号(编号是唯一的),称为内存地址,简称地址。int…

unityAB包(1/2)

unityAB包学习 1.AB包的导出扩展BuildAssetBundleOptions无特殊选项压缩相关选项 2.AB包资源管理3.Resource和AssetBundle加载方式的区别4.预设体5.Unity Asset Bundle Browser 工具5为什么要勾选拷贝到StreamingAsset里面。6.AB包的加载 1.AB包的导出 首先在Project窗口&…

算法——广度优先搜索——跨步迷宫

原题链接 思路:找出最短路径,然后判断是否存在连续三个点是横纵坐标相等的,如果有就步数减1 但是有两个样例过不了 错误原因:在错误的测试案例中,最短路径可能有多条,而我刚好选了一条比较曲折的&#x…

某酒企数字化转型及电商规划项目启动会暨培训会v(60页PPT)(文末有下载方式)

详细资料请看本解读文章的最后内容。 在当今数字化浪潮席卷之下,企业的发展面临着前所未有的机遇与挑战。对于某酒企而言,数字化转型和电商规划已成为其实现 “二次腾飞”、迈向世界级酒企的关键战略举措。本次启动会暨培训会,为该酒企的转型…

NET6 WebApi第5讲:中间件(源码理解,俄罗斯套娃怎么来的?);Web 服务器 (Nginx / IIS / Kestrel)、WSL、SSL/TSL

一、NET6的启动流程 区别: .NET6 WebApi第1讲:VSCode开发.NET项目、区别.NET5框架【两个框架启动流程详解】_vscode webapi-CSDN博客 2、WebApplicationBuilder:是NET6引入的一个类,是建造者模式的典型应用 1>建造者模式的…

vue中根据html动态渲染内容

需求&#xff1a;根据数据中的html&#xff0c;因为我是在做填空&#xff0c;所以是需要将html中的_____替换成input&#xff0c;由于具体需求我使用的是元素contenteditable代替的可编辑的input html部分 <div class"wrap"><component :is"rendered…

【AI】AI编程助手:Cursor、Codeium、GitHub Copilot、Roo Cline、Tabnine

文章目录 一、基本特性对比二、收费标准三、私有部署能力1、Tabnine2、Roo Code 三、代码补全与自然语言生成代码四、安装独立的IDE安装插件安装 五、基本使用&#xff08;一&#xff09;Cursor&#xff08;二&#xff09;GitHub Copilot1、获取代码建议2.聊天1&#xff09;上下…

三轴云台之角速度信号篇

三轴云台的角速度信号主要通过其内置的传感器&#xff08;如陀螺仪&#xff09;来感知和测量。 一、角速度信号的感知与测量 在三轴云台中&#xff0c;陀螺仪是测量角速度的关键组件。它通常安装在三个互相垂直的轴上&#xff08;通常为X、Y、Z轴&#xff09;&#xff0c;能够…

Grid 布局实现三栏布局

使用 CSS Grid 布局实现三栏布局(左右固定 100px,中间自适应)的核心原理是通过网格模板精确控制列宽分配。以下是具体实现方法及优化技巧: 一、基础实现 ​父容器设置 为外层容器添加 display: grid 使其成为网格容器,并通过 grid-template-columns 定义列宽 css .contain…

绿盟春招实习一面

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…

进制转换(R转十)(1290. 二进制转换十进制、1292. 十六进制转十进制、1291. 八进制转十进制、1405. 小丽找潜在的素数)

题单地址&#xff1a;题单中心-东方博宜OJ 这里以二进制转十进制为例&#xff08;按位加权求和法&#xff09; 1290. 二进制转换十进制 问题描述 请将一个 25 位以内的 2 进制正整数转换为 1010 进制&#xff01; 输入 一个 25 位以内的二进制正整数。 输出 该数对应的…

Redis 本地安装

首先安装&#xff1a; https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-from-source/ 进入root目录 tar -xzvf redis-stable.tar.gz cd redis-stable make然后 install sudo make install最后可以直接启动 redis-server但是此时启…

9.嗅探与Wireshark进阶分析

嗅探与Wireshark进阶分析 第一部分&#xff1a;嗅探的概念与重要性第二部分&#xff1a;Wireshark进阶功能第三部分&#xff1a;嗅探实践与分析总结 目标&#xff1a; • 理解嗅探&#xff08;Sniffing&#xff09;的概念及其在网络安全中的作用 • 掌握Wireshark的进阶功能&a…

在 VSCode 远程开发环境下使用 Git 常用命令

在日常开发过程中&#xff0c;无论是单人项目还是团队协作&#xff0c;Git 都是版本管理的利器。尤其是在使用 VSCode 连接远程服务器进行代码开发时&#xff0c;Git 不仅能帮助你管理代码版本&#xff0c;还能让多人协作变得更加高效。本文将介绍一些常用的 Git 命令&#xff…

npm 命令使用文档

目录 简介安装与配置基础命令依赖管理版本控制脚本管理包发布高级命令配置管理最佳实践常见问题 1. 简介 npm (Node Package Manager) 是 Node.js 的官方包管理工具&#xff0c;提供&#xff1a; 130万 开源包的注册表访问依赖解析与版本管理项目脚本自动化私有包管理能力完…

【Linux篇】进程控制

&#x1f4cc; 个人主页&#xff1a; 孙同学_ &#x1f527; 文章专栏&#xff1a;Liunx &#x1f4a1; 关注我&#xff0c;分享经验&#xff0c;助你少走弯路&#xff01; 1. 进程创建 1.1 fork函数 在linux中fork函数是非常重要的函数&#xff0c;它从已存在进程中创建一个…

HyperAD:学习弱监督音视频暴力检测在双曲空间中的方法

文章目录 速览摘要1. 引言2. 相关工作弱监督暴力检测双曲空间中的神经网络 3. 预备知识双曲几何切空间&#xff08;Tangent Space&#xff09;指数映射与对数映射&#xff08;Exponential and Logarithmic Maps&#xff09;3.1 双曲图卷积网络&#xff08;Hyperbolic Graph Con…

动态规划(6.不同路径II)

题目链接&#xff1a;63. 不同路径 II - 力扣&#xff08;LeetCode&#xff09; 解法&#xff1a; 本题为不同路径的变型&#xff0c;只不过有些地方有「障碍物」&#xff0c;只要在「状态转移」上稍加修改就可解决。 状态表示&#xff1a; 对于这种Γ路径类」的问题&#xf…