简述什么是微前端架构

前端演变：从单体到微前端架构的变革之路

随着网络应用程序复杂度的与日俱增，团队迫切需要一种可扩展、模块化的前端开发方法。在众多探索中，微前端架构脱颖而出，它将单体前端拆解为一个个小型、能够独立开发与部署的单元，这种思路与微服务革新后端系统如出一辙。在这篇博客里，我们将深入探究前端开发的演变历程，剖析微前端架构的基本原理与优势，并且探讨如何在微前端架构中有效管理模块联邦、路由等核心概念。

前端开发的演变轨迹

在网络开发的萌芽阶段，前端应用程序构造相当简易。彼时，开发人员主要运用HTML、CSS以及少量JavaScript搭建静态网站。但随着用户对动态、丰富网络体验的需求日益高涨，网络应用程序的复杂程度也水涨船高。

Angular、React和Vue.js等前端框架的相继问世，为前端开发带来了质的飞跃，它们提供了构建高互动性、数据驱动型应用程序的有力工具。不过，这些前端应用程序大多采用单体架构进行开发，即庞大且紧密耦合的代码库。随着团队规模的扩张以及功能复杂程度的加深，这种单体架构的前端应用维护难度急剧上升。

为应对上述难题，开发人员在后端领域引入了微服务架构（可参考https://aws.amazon.com/microservices/），将单体后端拆解为多个小型、可独立部署的服务。随着后端架构在微服务理念下变得愈发具有扩展性，一个清晰的思路逐渐浮现：相同的理念完全可以应用于前端开发，于是微前端架构应运而生。

什么是微前端架构？

微前端，可以说是微服务在前端领域的对应呈现。恰似微服务将后端单体系统拆解为诸多松散耦合的服务，微前端同样将大型网络应用程序细分成一个个小型、彼此独立却又协同运作，进而共同构成完整应用程序的部分。

借助微前端架构，用户界面（UI）的每一个组成部分都能实现独立开发与维护。各个团队能够自主开展工作，这不仅能确保更快速地发布产品，还能显著提升系统的可扩展性，并增强整体性能。

为何采用微前端架构

独立开发与部署：每个微前端都是一个独立的模块，这使得团队能够在不干扰其他模块的前提下，进行功能的开发、测试与部署。
技术多样性：不同的微前端部分可以选用不同的框架来构建（举例来说，一部分采用React，另一部分采用Vue.js）。
团队职责清晰：每个团队负责管理应用程序特定的功能或部分，团队间边界明晰，职责明确。
无缝用户体验：尽管微前端是各自独立开发的，但用户在使用时，感受到的却是一个完整、连贯的应用程序。

实例：Netflix

Netflix 便是微前端架构在现实世界中的典型应用。其网站被划分成不同的板块，诸如主页、搜索以及用户资料设置等，每个板块都由独立的微前端予以支撑。这种架构方式助力 Netflix 缩短了页面加载时间，因为每个板块都能够独立缓存，并且可按需更新，而不会对整个网站造成影响。同时，它也推动了快速的开发与发布流程，由于对某一个微前端的改动不会波及其他部分。

微前端与微服务之比较

微服务主要聚焦于将后端功能拆解为独立的服务，而微前端则是把这一理念运用到了用户界面层面。

微服务：负责处理后端功能，如数据库操作、API 相关事宜。
微前端：管理用户界面，负责处理用户交互以及表现层相关事务。

尽管存在上述差异，但二者也有着共同的目标：

松散耦合：无论是微服务还是微前端，各个部分都能独立运行。
自主性：团队在进行开发与部署时，无需频繁与其他团队协调。
可扩展性：每个服务或前端部分都能依据用户需求，独立进行扩展。
微前端——集成技术

资产存储（Asset Store）：将诸如CSS、JavaScript等共享资产存储于中央存储库内，以此确保微前端在应用程序中能够复用并共享常用资产。
模块联邦（Module Federation）：作为webpack 5的一项功能，它支持微前端在运行时实现模块的共享与动态加载，进而让独立的微前端之间能够相互交互。
iFrames和Web Components：尽管这并非严格意义上的微前端技术，但这些方法能够提供封装与隔离效果，尤其适用于遗留系统。

深入剖析模块联邦

模块联邦（Module Federation）是webpack 5所具备的一项强大功能，它允许微前端在运行时动态地共享JavaScript模块。这一概念有效应对了微前端架构中的关键难题，比如共享依赖关系、减少重复内容以及提升互操作性等。

工作机制

每个微前端既能够对外公开自身的模块，也能够从其他微前端处引入模块。
模块以异步方式在运行时加载，这有助于缩短应用程序的初始加载时长。
像React这类共享依赖项仅需加载一次，便可在不同微前端之间重复使用。

显著优势

动态模块加载：微前端能够依据实际需求动态加载模块，减少初始加载时间，提升性能表现。
去中心化架构：各团队可独立管理自身的模块，无需频繁与其他团队进行协调。
共享依赖：依赖项能够在微前端之间共享，最大限度减少重复内容，确保应用程序的一致性。

基于React和Webpack的简易实现示例

接下来，我们将演示如何借助Webpack的模块联邦功能在React中实现相关操作。我们会构建两个简易的应用程序：

主应用程序：作为主体应用。
远程应用程序：这是主应用程序将在运行时动态加载的微前端。

步骤1：搭建远程应用程序

创建一个HelloWorld组件（位于src/components/HelloWorld.js）

const HelloWorld = () => <h1>Hello from the Micro Frontend!</h1>;
export default HelloWorld;

更新webpack.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;


module.exports = {
  mode: 'development',
  devServer: { port: 3001 },
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: { './HelloWorld': './src/components/HelloWorld' },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

运行远程应用程序
```
npm start
```

步骤2：搭建主应用程序

安装依赖并配置Webpack：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { ModuleFederationPlugin } = require('webpack').container;


module.exports = {
  mode: 'development',
  devServer: { port: 3000 },
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: { remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js' },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

在src/App.js中加载远程组件：

const HelloWorld = React.lazy(() => import('remoteApp/HelloWorld'));


function App() {
  return (
    <div>
      <h1>Host App</h1>
      <React.Suspense fallback="Loading...">
        <HelloWorld />
      </React.Suspense>
    </div>
  );
}
export default App;

运行主应用程序：
```
npm start
```

整体作用呈现

此示例清晰展示了模块联邦如何通过让主应用程序这类应用，在运行时动态加载并集成如HelloWorld组件这样的微前端模块，来实现前端单体的拆分。这种方式实现了团队解耦，支持独立部署，使开发者能够构建具有可扩展性的模块化前端架构，同时兼顾灵活性与可重用性。

这种轻量级、模块化的方法，映射出微服务革新后端开发的思路。将同样的原则应用于前端，能够有效提升大型应用程序的性能、开发效率以及可扩展性。

在微前端架构中处理路由

路由在任何网络应用程序里都占据着关键地位，而在微前端架构中管理路由，更需格外留意，以保障用户能获得无缝的体验。常见的路由管理方式主要有以下两种：

单一路由层（Shell）：由一个中央“shell”应用程序负责统筹所有路由。该应用程序熟知每个微前端对应的路由信息，并在必要时将导航操作委派给相应的微前端。
独立路由：每个微前端自行管理其内部路由，这赋予了各个微前端更高的自主性。外层的shell应用程序或许仍负责管理顶级路由，但会将更深层次的路由控制权下放给对应的微前端。

在微前端中共享上下文和状态

在微前端架构下，实现状态与上下文的共享颇具挑战。以下为大家介绍一些有效的管理策略：

全局状态管理：借助诸如Redux、Zustand等能够跨微前端进行操作的状态管理工具，让各个微前端得以共享全局上下文。
事件及发布/订阅系统：微前端之间可通过基于事件的系统，或者采用发布/订阅模式来实现相互通信，以此达成解耦的交互模式。
共享服务：利用共享服务层，例如API网关或GraphQL，为所有微前端提供通用功能。

何时使用微前端架构

微前端架构尤为适用于那些对模块化和独立开发有需求的大型复杂应用程序。在以下关键场景中，微前端架构能够充分发挥其优势：

大型复杂应用程序：微前端可将大型应用程序拆解为易于管理的部分，优化组织结构，同时缩短构建耗时。
多团队协作：各团队能够针对应用程序的不同部分并行开展开发工作，并实现独立部署。
独立部署特性：借助微前端，可在不重新部署整个应用程序的前提下，对特定功能进行更新，从而降低部署风险。
多样化技术栈支持：应用程序的不同部分能够选用不同的框架，比如React、Vue等，在技术选型上赋予了更大的灵活性。
卓越的可扩展性：由于应用程序的每个部分相互隔离，且可独立扩展，微前端架构使得应用程序的扩展与维护更为便捷。
遗留系统现代化改造：能够在无需完全重写的情况下，逐步对遗留系统进行替换，实现向现代技术的平稳过渡。
性能显著提升：通过对应用程序不同部分进行缓存或延迟加载，优化页面加载时间。

不过，需注意避免在小型应用程序，或者对全局状态共享有紧密需求的项目中使用微前端架构，因为其带来的复杂性可能并不匹配所带来的收益。

结论

微前端架构无疑是现代网络应用程序发展的必然趋势，它赋能团队构建出具备高扩展性、易维护性且模块化的前端系统。通过将前端拆分为可独立部署的单元，团队能够自主开展工作，更高效地管理依赖关系，并打造出更为灵活的架构体系。

借助模块联邦等工具，以及经过深思熟虑的路由和状态管理策略，微前端架构为期望突破单体应用程序局限的开发者们开辟了一条令人振奋的前行道路。无论你是正在投身于大型网络应用程序的开发，亦或是刚刚踏上前端开发之旅，微前端架构都提供了一种构建更具扩展性和可维护性系统的有效途径。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件举报，一经查实，本站将立刻删除。
文章由技术书栈整理，本文链接：https://study.disign.me/article/202510/4.micro-frontend-architecture.md
发布时间： 2025-03-03