当前位置: 首页 > news >正文

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.dtcms.com/a/79855.html

相关文章:

  • Linux与HTTP中的Cookie和Session
  • javaFX的使用
  • 如何在linux中利用方向键快速查找之前的敲过的命令
  • 第六:go 操作 redis-go
  • MediaPipe 手势识别全解析:如何在移动端实现实时手部跟踪
  • 网络空间安全(39)入侵排查
  • 【C++模板】
  • ambiq apollo3 Flash实例程序注释
  • 通过Typora + PicGo + 阿里云对象存储(OSS)实现图床
  • Numpy
  • 【vulhub/wordpress靶场】------获取webshell
  • 为什么 API 接口漏洞越来越多?与现代网站开发环境的关系
  • [Deepseek 学c++]初始化捕获与按值(显式与隐式)捕获傻傻分不清
  • 2025年云南食品安全员管理员考试题库
  • 代码随想录_动态规划
  • webpack等构建工具如何支持移除未使用的代码
  • 力扣hot100——三数之和(双指针)
  • 每天五分钟玩转深度学习PyTorch:基于pytorch搭建LSTM和GRU模型
  • 深度优先搜索(DFS)与广度优先搜索(BFS)全面解析 + 经典算法题实战(Java实现)
  • leetcode106 从中序与后序遍历序列构造二叉树
  • Java学习笔记-XXH3哈希算法
  • Dify 项目开源大模型应用开发平台
  • deque
  • Linux基础开发工具--gdb的使用
  • 蓝桥杯青少组stema2025年3月9日scratch初级组真题——转动的图形
  • 除自身以外数组的乘积——面试经典150题(力扣)
  • 每天一道算法题-两数相加
  • C++编程语言特性
  • Android Jetpack Compose介绍
  • 238.除自身以外数组的乘积