微前端框架主流方案剖析

微前端架构是为了在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。
微前端框架内的各个应用都支持独立开发部署、不限技术框架、支持独立运行、应用状态隔离但也可共享等特征。
本文会从框架的应用隔离实现方案、实战、优缺点三个方面探一探各个框架。帮助大家了解各个框架是如何使用,如何运行,从而能选出适合自己项目的微前端方案。

iframe

在没有各大微前端解决方案之前,iframe是解决这类问题的不二之选,因为iframe提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。
但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题:

  1. url 不同步,浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

  2. UI 不同步,DOM 结构不共享,弹窗只能在iframe内部展示,无法覆盖全局

  3. 全局上下文完全隔离,内存变量不共享,iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。

  4. ,每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

single-spa

目前(2024年4月)github star 13k

相关推荐

  1. 前端框架主流方案剖析

    2024-04-14 20:20:02       14 阅读
  2. 主流前端框架对比与选择策略

    2024-04-14 20:20:02       17 阅读
  3. 前端框架 qiankun

    2024-04-14 20:20:02       41 阅读
  4. web前端三大主流框架

    2024-04-14 20:20:02       10 阅读
  5. web前端三大主流框架

    2024-04-14 20:20:02       7 阅读
  6. web前端三大主流框架

    2024-04-14 20:20:02       6 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-14 20:20:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-14 20:20:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-14 20:20:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-14 20:20:02       20 阅读

热门阅读

  1. 前端使用minio传输文件

    2024-04-14 20:20:02       16 阅读
  2. Qt学习笔记(二)

    2024-04-14 20:20:02       12 阅读
  3. MySQL 知识目录

    2024-04-14 20:20:02       18 阅读
  4. Webpack

    Webpack

    2024-04-14 20:20:02      16 阅读
  5. 人工智能教程

    2024-04-14 20:20:02       14 阅读