常见微前端方案

转载请注明出处，点击此处 查看更多精彩内容。

iframe

iframe 是 HTML 的内联框架元素，表示嵌套的 Browsing Context，它能够将另一个 HTML 页面嵌入到当前页面中，每个嵌入的 Browsing Context 都有自己的会话历史记录和 DOM 树。

每个浏览上下文都拥有完整的文档环境，因此页面上每个 iframe 都需要增加内存和其它计算资源，虽然理论上来说能够在代码中写出来无限多的 iframe，但是这么做可能会导致某些性能问题。

优点

• Web 应用隔离的非常完美，无论是 JavaScript、CSS、DOM 都完全隔离开来。
• 非常简单，使用没有任何心智负担。

缺点

• DOM 结构不共享，弹窗只能在 iframe 内部展示，无法覆盖全局。
• 路由状态丢失，刷新页面会导致 iframe 的 url 状态丢失、后退前进按钮无法使用。
• 性能差，每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。
• 应用之间通信困难，全局上下文完全隔离，内存变量不共享，无法访问非同源的 window 对象的几乎所有属性，跨域通信仅可通过 window.postMessage() 来实现。

路由转发

路由分发式微前端，即通过路由将不同的业务分发到不同的独立前端应用上。最常用的方案是通过 HTTP 服务的反向代理（如 Nginx）将不同页面的请求分发到不同的服务上。

优点

• 实现简单。
• 维护、开发成本低。
• 不需要对现有应用进行改造。

缺点

• 用户体验不好，每次切换应用时，浏览器都需要重新加载页面。
• 子应用之间的通信比较困难。
• 多个子应用无法并存。
• 子应用切换时需要重新登录。

动态加载模块

创建一个基座应用，允许子应用单独部署。为了实现这一点，创建一个 manifest 文件，记录上线的子应用及版本信息，当子应用部署更新时修改 manifest 文件，基座应用通过 manifest 检查更新子应用资源。

改变每个子应用加载的 JavaScript 文件有很多的方法：

• Web 服务器：在你的 Web 服务器为每个子应用的正确版本创建一个动态脚本。
• 使用模块加载 例如 SystemJS 可以在浏览器通过动态 urls 下载并执行 JavaScript 代码。

npm

每个子应用在一个单独的代码仓库中，每次更新时发布一个新版本到 npm，创建一个基座应用，通过 npm 安装每个子应用。

优点

• npm 安装对于开发中更熟悉，易于搭建。

缺点

• 子应用发生变更时，基座应用需要重新安装、重新构建和重新部署。
• 无法动态安装、卸载子应用。

Web Component

Web Component 是一套不同的技术，允许你创建可重用的定制元素（它们的功能封装在你的代码之外）并且在你的 Web 应用中使用它们。

Web Components 由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

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