WHAT - 微前端系列（一）

@PHARAOH

已于 2024-06-05 11:27:31 修改

阅读量601

点赞数 15

分类专栏：前端微前端学习专栏文章标签：前端

于 2024-05-26 16:51:56 首次发布

本文链接：https://blog.csdn.net/weixin_58540586/article/details/139216616

版权

前端微前端学习专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前言

在 WHAT - 前端代码仓库管理模式我们介绍过微前端是前端代码仓库管理模式中的一种，其他还包括单体仓库模式、多仓库模式、Git Submodule、Monorepo 模式。

起初我们的应用可能仅有一个业务模块，路由硬编码在项目里，Layout 层和业务子系统也写在一起：

请添加图片描述

随着业务的增长，我们的系统接入了更多的业务模块，这个时候通过一定的路由配置和多页的配置：

请添加图片描述

但随着业务更进一步增长，页面越来越多，参与进来的开发人员也越来越多，一次发布需要依赖N个人来共同保障，迭代的成本变的原来越高。

这个系列我们将重点介绍微前端。微前端架构旨在解决单体应用在一个相对长的时间跨度下，由于参与人员、团队的增多，从一个普通应用演变成一个巨石应用（Fronted Monolith）后，随之而来的不好维护的问题。微前端采取分治的思想将系统根据业务域分成不同的子应用，而承载子应用的 Layout 层拆分为主应用，各个子应用独立开发、发布，由不同的业务团队维护，以此来解决复杂的单体应用带来的各种开发、维护问题。

其实微前端还分为Web和小程序，两个场景的技术实现有异曲同工之妙。这里主要介绍的是前者。

二、介绍

2.1 主要概念

微前端（Micro-Frontend）是一种前端开发的架构模式，它将一个单一的前端应用程序拆分为多个较小的、独立的子应用程序，每个子应用程序可以独立开发、部署和运行。

这种架构类似于后端的微服务架构，可以帮助大型前端项目提高灵活性、可维护性和扩展性。

2.2 优势

独立子应用程序：微前端的主应用及子应用独立开发、部署，并在一定程度上微前端子应用可以独立于主应用单独运行。减少部署风险和时间，提高发布频率。
沙箱隔离：子应用自己单独的运行时，各个子应用之间的状态不被共享。
灵活性：也称为框架无关，可以在同一个项目中使用不同的技术栈，选择最合适的工具来解决具体问题。因为主应用仅仅加载子应用构建的 bundle。
模块化和复用性：通过将应用拆分为小的模块，可以提高代码的复用性和可维护性。
团队独立性：不同团队可以并行工作，减少团队间的协调成本，提高开发速度。
增量升级：可以逐步迁移或重构旧的单体前端应用，而不需要一次性完成所有工作。

2.3 实现方式

微前端的实现方式有多种，常见的方法包括：

1. iFrame

使用iFrame加载不同的子应用。优点是隔离性强，但可能带来性能和SEO问题。在 qiankun | why not iframe 有详细解释。

请添加图片描述

有关 iframe 更详细的内容可以阅读 WHAT - iframe 介绍

2. JavaScript加载

通过动态加载JavaScript文件来加载不同的子应用。需要处理好不同子应用之间的依赖和共享资源。

3. Web Components

使用Web Components标准来构建独立的、可复用的UI组件，并将它们组合成完整的应用。

2.4 示例

以下是一个简单的微前端实现示例，使用JavaScript动态加载子应用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Micro-Frontend Example</title>
</head>
<body>
  <div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>

  <script>
    // 动态加载header子应用
    fetch('http://localhost:3001/header.js')
      .then(response => response.text())
      .then(script => {
        const headerScript = document.createElement('script');
        headerScript.text = script;
        document.getElementById('header').appendChild(headerScript);
      });

    // 动态加载content子应用
    fetch('http://localhost:3002/content.js')
      .then(response => response.text())
      .then(script => {
        const contentScript = document.createElement('script');
        contentScript.text = script;
        document.getElementById('content').appendChild(contentScript);
      });

    // 动态加载footer子应用
    fetch('http://localhost:3003/footer.js')
      .then(response => response.text())
      .then(script => {
        const footerScript = document.createElement('script');
        footerScript.text = script;
        document.getElementById('footer').appendChild(footerScript);
      });
  </script>
</body>
</html>

2.5 资源

通过以上概述和示例，前端开发者可以更好地理解和应用微前端架构，以提升大型项目的开发效率和灵活性。

三、qiankun

Qiankun 是一个面向微前端架构的 JavaScript 框架，用于构建企业级多平台、多应用的前端应用。

并且，Qiankun 框架采用的实现方式是 JavaScript 加载，它使用自定义的加载器来动态加载子应用的 JavaScript 文件，并通过自定义事件的方式进行子应用之间的通信。这种方式可以更灵活地管理子应用的生命周期，避免了使用 iframe 带来的性能和 SEO 问题，同时也提供了良好的隔离性和共享机制。

下面是关于 Qiankun 框架的详细介绍：

3.1 产生背景

随着前端应用规模的不断扩大，单体应用已经不能满足复杂的业务需求，微前端架构应运而生。Qiankun 的产生正是为了解决这一问题，它提供了一种将前端应用拆分成多个独立子应用，并能够在同一个页面中共存、独立运行的解决方案。

3.2 作用

微前端架构支持：Qiankun 提供了微前端架构的支持，允许将多个前端应用集成到同一个页面中。
应用隔离：各个子应用之间完全隔离，避免了全局变量的冲突。
共享状态：Qiankun 提供了状态管理的机制，可以在不同的子应用之间共享状态。
独立部署：每个子应用可以独立部署，便于团队分工协作。

3.4 基本使用

创建主应用：主应用负责加载和管理子应用，需要引入 qiankun 框架，并配置需要加载的子应用信息。
创建子应用：每个子应用是一个独立的前端应用，可以使用任何前端框架，但需要按照 Qiankun 规范进行修改，以适配微前端架构。
注册子应用：在主应用中注册子应用，并指定子应用的入口、挂载点等信息。
启动应用：在主应用中调用 start 方法启动微前端应用，加载并运行子应用。

3.5 注意事项

子应用需要提供一个唯一的名称，用于在主应用中标识。
子应用需要支持跨域，因为它们会被加载到主应用的同一个页面中。
主应用需要处理子应用之间的路由冲突，可以使用自定义路由解决方案。

总的来说，Qiankun 框架为构建复杂的前端微服务架构提供了一个可靠的解决方案。

四、微前端如何交付

基本工作原理和架构

通常情况下，单体的子应用不直接交付给用户，应该以产品的形式交付给用户。

产品：是具有 sso 登录、菜单、页面、权限管理等功能的完整应用，是一个交付给用户使用的最小单元。
平台：可以将多个产品进行聚合展示，并支持后台对各个产品的个性化展示配置。

在这里插入图片描述
图片来源：https://juejin.cn/post/7114589692560932878?share_token=b055a523-1723-4bbf-b788-a0f2767f65a1

请添加图片描述
通过上述架构图，我们可以整理出如下路由规范：

https://micro.company.com/{{product-name}}/{{project-name}}/{{page-name}}/{{route-name}}

即一个应用可以由多个微应用组成。多个应用可以组成一个产品进行交付。管理者可以通过平台来管理这些产品、应用、子应用。

全链路加载过程

请添加图片描述

@PHARAOH

关注

15
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
WHAT - 微前端系列（一）

微前端（Micro-Frontend）是一种前端开发的架构模式，它将一个单一的前端应用程序拆分为多个较小的、独立的子应用程序，每个子应用程序可以独立开发、部署和运行。这种架构类似于后端的微服务架构，可以帮助大型前端项目提高灵活性、可维护性和扩展性。
复制链接

扫一扫