微前端框架主流程序分析
最编程
2024-04-15 07:01:24
...
微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。
本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用,如何运行,从而能选出适合自己项目的微前端方案。
iframe
在没有各大微前端解决方案之前,iframe
是解决这类问题的不二之选,因为iframe
提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。
但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:
-
url 不同步,浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
-
UI 不同步,DOM 结构不共享,弹窗只能在iframe内部展示,无法覆盖全局
-
全局上下文完全隔离,内存变量不共享,iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
-
慢,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
single-spa
目前(2024年4月)github star 13k
推荐阅读
-
2.5 Java 全栈开发前端 + 后端(全栈工程师进阶路径) - 前端框架 VUE3 - 基础 - Vue 路由 - 程序化路由
-
前端(XVI)--微信小程序语音转文字、文字转语音功能实现
-
公司企业展示门户店铺展示宣传微信小程序前端源码
-
微前端框架主流程序分析
-
vue 的简单实例化 Vue.js 是一个流行的前端框架,如何创建一个基本的计数器应用程序
-
前端分析工具 Charles 记录 Android/IOS 手机 https 应用程序
-
uniapp 微信小程序前端登录流程
-
微信小程序分析高德地图 SDK
-
微信小程序 UI 自动化:选择工具/框架 01-2.2 minium 官方介绍
-
微前端乾坤--实现主应用与子应用的通信(用bigfish框架通信原理)--react、vue实现应用通信(二)