借钱是个无底洞！

3、ESM

ESM 是 ES Module 的缩写，是 Ecma script 2015 中提出的一种前端模块化手段，那么，它又是如何做到微前端的呢？其实，微前端无外乎三大特性， 无技术栈限制 、 应用单独开发 ， 多应用整合 ，只要抓住了这三个特性，那就不难理解 ESM 如何做的了：

• 无技术栈限制： ESM 加载的只是js内容，无论哪个框架，最终都要编译成js，因此，无论哪种框架， ESM 都能加载。

• 应用单独开发：ESM只是js的一种规范，不会影响应用的开发模式。

• 多应用整合：只要将微应用以 ESM 的方式暴露出来，就能正常加载。

• 远程加载模块: ESM 能够直接请求 cdn 资源，这是它与生俱来的能力。

ESM 是能做到微前端的核心思想，但是它也存在着 兼容性 这一大弊端，尽管 ESM 已经很优秀了，但是 大部分老版的浏览器 仍然无法直接使用，这也是babel等编译工具出现的原因，幸运的是，他可以通过 webpack 、 rollup 、 esbuild 、 snowpack 等编译工具成为兼容性的代码。
 

二、现有微前端解决方案

查找了大量的资料后，我总结了以下主流的能够真正实现微前端概念的解决方案，如有遗漏，欢迎小伙伴们补充~

1、iframe

众所周知， iframe 是 html 提供的标签， 能加载其他web应用的内容 ，并且它能兼容所有的浏览器，因此，你可以用它来 加载任何你想要加载的web应用 。

iframe最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。读到这时，相信小伙伴们跟我一样，觉得iframe与微前端概念中提到的 独立开发 、 独立维护 、 相互隔离 非常的吻合，有种直接上ifame就完事儿了的想法，但为何它到现在也不是微前端主要的实现方式呢，后来有幸拜读了 qiankun技术圆桌 中一篇关于微前端 Why Not Iframe 的思考，总结的很到位，现复述其中的一段描述

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

以下是我对该文中总结部分的总结：

• 不是单页应用，会导致浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。

• 弹框类的功能无法应用到整个大应用中，只能在对应的窗口内展示。

• 由于可能应用间不是在相同的域内，主应用的 cookie 要透传到根域名都不同的子应用中才能实现 免登录 效果。

• 每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程，占用大量资源的同时也在极大地消耗资源。

• iframe的特性导致搜索引擎无法获取到其中的内容，进而无法实现应用的 seo

我猜，以上原因便是 iframe 没能作为官方微前端方案的原因吧。

2、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模板）： <template> 和 <slot> 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。

通过以上描述，再结合微前端的概念，我们来看看 Web Components 是如何做到微前端：

• 技术栈无关： Web Components 是浏览器原生组件，那即是在任何框架中都可以使用。

• 独立开发：使用 Web Components 开发的应用无需与其他应用间产生任何关联。

• 应用间隔离： Shadow DOM 的特性，各个引入的微应用间可以达到相互隔离的效果。

综上所述， Web Components 是有能力以组件加载的方式将微应用整合在一起作为微前端的一种手段，但不幸的是， Web Components 是浏览器的新特性，所以它的兼容性不是很好，如果有兼容性要求的项目还是无法使用，具体请查看 can i use 。

（编辑：周口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!