微前端的几种实现方案

iframe

iframehtml 提供的标签,能加载其他web应用的内容,并且它能兼容所有的浏览器,因此,你可以用它来加载任何你想要加载的web应用。

iframe最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。iframe与微前端概念中提到的独立开发、独立维护、相互隔离非常的吻合。

qiankun技术圆桌中一篇《关于微前端Why Not Iframe的思考》,总结的很到位,现复述其中的一段描述

iframe虽然基本能做到微前端所要做的所有事情,但它的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来开发体验、产品体验的问题。

文中对 iframe 的总结:

  • 不是单页应用,不会影响外部的路由地址,无法记住当前访问的页面地址,会导致浏览器刷新页面 iframe url 状态丢失、后退前进按钮无法使用
  • 弹框类的功能无法应用到整个大应用中,只能在对应的窗口内展示
  • 由于可能应用间不是在相同的域内,主应用的 cookie 要透传到根域名都不同的子应用中才能实现免登录效果
  • 每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程,占用大量资源的同时也在极大地消耗资源
  • iframe的特性导致搜索引擎无法获取到其中的内容,进而无法实现应用的 seo

猜你喜欢

转载自blog.csdn.net/Moonoly/article/details/114274167
今日推荐