ZiYu Front End

简介：

微前端是一种软件架构模式，旨在将前端应用程序拆分为更小的、独立的部分，然后将这些部分组合成一个整体。
微前端的目标是允许不同团队独立开发、测试和部署前端功能，同时保持应用程序的一致性和整体性。

微前端的关键思想

拆分：将前端应用程序拆分成更小、更易于管理的部分，例如模块、功能或页面。
独立部署：每个前端部分都可以独立部署，这意味着团队可以根据需要对其进行更新和发布，而不会影响其他部分。
组合：在客户端动态组合各个部分，以构建出完整的前端应用程序。这通常通过异步加载、路由管理和通信协议来实现。
一致性：尽管由不同团队开发和维护，但微前端应用程序应该保持一致的用户体验和整体外观。

iframe 在微前端中的优点和缺点：

优点：

隔离性：每个应用程序都在独立的 iframe 中运行，提供良好的隔离性，防止相互影响。
技术无关性：iframe 允许使用不同技术栈来构建不同的应用程序，因此更加灵活。
异构环境支持：不同的应用程序可以在不同的环境中运行，例如使用不同的 JavaScript 框架或库。
安全性：iframe 提供了一种安全的方式来加载外部内容，防止恶意代码注入主应用程序。
简化集成：iframe 方便地集成第三方应用程序或服务，无需修改主应用程序的代码。

缺点：

性能开销：iframe 会引入额外的性能开销，包括加载时间、内存消耗等。
SEO 问题：搜索引擎可能无法正确索引 iframe 中的内容，影响搜索引擎优化。
通信限制：由于浏览器的同源策略，iframe 之间的通信受到限制，需要使用复杂的消息传递机制。
用户体验问题：iframe 可能导致页面加载时的闪烁或延迟，影响用户体验。
维护困难：每个应用程序都在独立的 iframe 中，可能增加维护和调试的复杂性。

Web Components

Web Components 是一组现代 Web 平台 API，它们允许你创建可重用的自定义元素（Custom Elements）和封装样式和行为的组件。在微前端中，Web Components 可以用来构建独立的、可重用的前端组件，这些组件可以由不同团队开发并在不同应用程序中共享和重用。

以下是 Web Components 在微前端中的应用：

独立部署：Web Components 具有良好的封装性，可以独立部署到任何支持的环境中。这意味着你可以构建一个 Web Component，然后在多个微前端应用程序中使用它，而不需要修改或重新编译它。
技术无关性：Web Components 可以与任何前端框架或库一起使用，并且不依赖于特定的技术栈。这使得它们非常适合用于微前端架构，因为每个团队可以选择他们喜欢的技术栈来开发自己的组件。
标准化：Web Components 是 Web 平台的标准一部分，得到了广泛的支持。这意味着它们可以在各种现代浏览器中使用，并且可以信任其稳定性和可靠性。
组合性：Web Components 可以嵌套和组合在一起，从而构建出复杂的界面。这使得它们非常适合在微前端应用程序中创建复杂的用户界面，其中每个组件可以由不同的团队负责开发和维护。
独立性：由于 Web Components 是独立的自定义元素，它们不会与其他组件发生冲突，可以方便地集成到现有的应用程序中而不会影响到其他部分的功能。

代码实例

我们创建了一个名为 custom-greeting 的自定义元素。它接受一个名为 target 的属性，用于设置问候的目标。当页面加载时，我们将在 shadow DOM 中渲染一个问候信息，并根据传入的属性设置问候的目标。最后，我们通过 <custom-greeting> 标签将这个自定义元素添加到页面中，并传入了 target 属性值为 "Friend"。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Component Example</title>
  </head>
  <body>
    <!-- 创建一个自定义元素 -->
    <template id="custom-greeting-template">
      <style>
        /* 自定义元素的样式 */
        .greeting {
          font-size: 24px;
          font-weight: bold;
          color: green;
        }
      </style>
      <div class="greeting">
        Hello,
        <span id="target"></span>
        !
      </div>
    </template>

    <script>
      // 定义一个新的自定义元素
      class CustomGreeting extends HTMLElement {
        constructor() {
          super();

          // 使用外部模板初始化 shadow DOM
          const template = document.getElementById("custom-greeting-template");
          const shadowRoot = this.attachShadow({ mode: "open" });
          shadowRoot.appendChild(template.content.cloneNode(true));

          // 获取自定义元素属性
          const target = this.getAttribute("target") || "World";
          // 将目标设置到自定义元素内
          shadowRoot.getElementById("target").innerText = target;
        }
      }

      // 注册自定义元素
      customElements.define("custom-greeting", CustomGreeting);
    </script>

    <!-- 使用自定义元素 -->
    <custom-greeting target="Friend"></custom-greeting>
  </body>
</html>

现有框架对比：

single-spa

优点： 支持多个前端框架集成，无需刷新页面即可切换应用，改善初始加载时间，支持延迟加载代码。

缺点： 不支持 Js 沙箱和样式隔离，可能导致冲突和样式污染，集成复杂。

qiankun

优点： 基于 single-spa，支持多种框架和构建工具，代码库隔离性较高，子应用可独立开发、部署，灵活的通信机制。

缺点： 适配成本较高，需要修改生命周期、静态资源路径、路由等，css 沙箱和 js 沙箱执行性能下降。

micro-app

优点： 兼容所有框架，灵活性高，高度可定制，提供了 js 沙箱、样式隔离、元素隔离、预加载、数据通信等功能。

缺点： 需要时间学习，对于不支持 Web Components 的浏览器没有降级处理。

无界

优点： 基于 Web Components + iframe，具备成本低、速度快、原生隔离、功能强等优点。

缺点： 未提供详细的文档或信息。

EMP: 基于 Webpack5 Module Federation

优点： 共享模块粒度自由掌控，小到一个单独组件，大到一个完整应用。既实现了组件级别的复用，又实现了微服务的基本功能， 缺点： 需要统一使用 webpack5。

总结：

在选择微前端框架时，应考虑项目的具体需求、技术栈兼容性、开发体验、性能优化以及社区支持等因素。例如，如果项目需要高度的技术栈兼容性和灵活性，micro-app 可能是一个好选择。如果项目已经使用了 single-spa 或 qiankun，那么继续使用这些框架可能更为方便。对于需要快速开发和简单集成的场景，wujie 可能更适合。每个框架都有其优势和局限，选择时应根据项目的具体情况进行评估。

简介： ​

微前端的关键思想 ​

iframe 在微前端中的优点和缺点： ​

Web Components ​

代码实例 ​

现有框架对比： ​

single-spa ​

qiankun ​

micro-app ​

无界 ​

EMP: 基于 Webpack5 Module Federation ​

总结： ​

简介：