微前端的几种实现方案

iframe

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

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

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

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

文中对 iframe 的总结:

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

Web Components

或许很多小伙伴对Web Components不是很了解,它是由google推出的浏览器的原生组件,MDN对Web Components的定义是这样的:

作为开发者,我们都知道尽可能多的重用代码是一个好主意。这对于自定义标记结构来说通常不是那么容易 — 想想复杂的HTML(以及相关的样式和脚本),有时您不得不写代码来呈现自定义UI控件,并且如果您不小心的话,多次使用它们会使您的页面变得一团糟。
Web Components旨在解决这些问题 — 它由三项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。

它的三项主要技术是指:

  • Custom elements(自定义元素):一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
  • Shadow DOM(影子DOM):一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
  • HTML templates(HTML模板)