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

相关推荐
Bruce_Liuxiaowei8 分钟前
前端校验登录态,等于没校验——一次应急广播终端高危漏洞的发现与报送
运维·前端·安全
Meta Luo14 分钟前
AI 时代,Web 自动化测试该怎么做?
前端·人工智能·playwright 替代工具·无代码自动化测试工具·低代码 ui 自动化测试·web 回归测试工具
去伪存真17 分钟前
AI Agent 性能评估指标与自动化测试落地方案
前端·agent
MaAidan42 分钟前
用 Agent 排查线上问题:SLS 日志分析 + DB/Redis 数据验证,一条链路搞清楚
前端·bootstrap·html
墨林陌1 小时前
AI 热点日报(2026-11-03):美团发布 1.6 万亿参数国产大模型,四大厂商共推 AI 训练退出标准
前端
Moment1 小时前
DeepSeek 发布新模型,直接把 Agent 联网搜索的门槛打下来了!
前端·后端
AI宇宙狂想家1 小时前
开源 AI 视频工具进化史:从难用到好用,OpenMontage 改了什么
开发语言·前端·人工智能·开源·ai创业·openmontage
Sailing2 小时前
🚀🚀【封闭结束7】Agent 为什么总是“失忆”?从长期记忆到上下文工程的生产实践
前端·人工智能·agent
OpenTiny社区2 小时前
AI 生成的 Vue 代码,终于能直接用了!
前端·vue.js·github
Ramble_Naylor2 小时前
Rust深度解读:高性能 Web 网关与 Axum 架构剖析
前端·架构·rust