微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。
本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用,如何运行,从而能选出适合自己项目的微前端方案。
iframe
在没有各大微前端解决方案之前,iframe
是解决这类问题的不二之选,因为iframe
提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。
但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:
-
url 不同步,浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
-
UI 不同步,DOM 结构不共享,弹窗只能在iframe内部展示,无法覆盖全局
-
全局上下文完全隔离,内存变量不共享,iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
-
慢,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。文章来源:https://www.toymoban.com/news/detail-852159.html
single-spa
目前(2024年4月)github star 13k文章来源地址https://www.toymoban.com/news/detail-852159.html
到了这里,关于微前端框架主流方案剖析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!