第五章（原理篇） 微前端技术之模块联邦与动态加载

文章目录

• Webpack的模块联邦与动态加载
• • [模块联邦（Module Federation）](#模块联邦（Module Federation）)
  • • 第一步：设置Webpack配置
    • • 在应用1（App1）中
      • 在应用2（App2）中
    • 第二步：编写和暴露模块
    • 第三步：在应用2中使用暴露的模块
    • 第四步：启动应用
  • 动态加载与代码拆分
  • 在微前端中的应用
  • • • 案例分析
      • 代码示例

Webpack的模块联邦与动态加载

模块联邦（Module Federation）

Webpack 5引入了一个革命性的新功能，叫做模块联邦（Module Federation）。模块联邦允许Webpack构建之间的模块共享，它打开了一种新的方式来看待代码的复用和组合，尤其适合在微前端架构中使用。

在模块联邦之前，共享代码通常意味着你需要抽取公共的依赖到一个独立的包（package），然后发布到npm或其他包管理器上。其他项目再通过包管理器安装这些依赖。这种方式有几个问题：首先，它增加了维护成本，因为你需要维护和管理多个包；其次，它限制了共享代码的动态性，因为一旦包发布，其他项目只能使用那个特定版本的代码，除非他们更新到新版本。

模块联邦解决了这些问题。它允许Webpack构建之间直接共享模块，而不需要通过npm发布和安装。这意味着你可以在一个Webpack构建中定义一个共享的模块，然后在另一个Webpack构建中直接引用它，就像引用本地模块一样。更重要的是，模块联邦支持动态加载，你可以在运行时根据需要加载和卸载共享的模块。

下面用一个简单的代码示例展示如何使用Webpack的模块联邦来共享模块。

第一步：设置Webpack配置

首先，你需要在每个Webpack构建中配置模块联邦。这通常是通过ModuleFederationPlugin来实现的。

在应用1（App1）中

假设我们有两个应用：App1和App2。App1想要暴露一个模块给App2使用。

// webpack.config.js for App1
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      // 应用1的名称，必须唯一
      name: 'app1',
      // 暴露的模块，可以让其他应用引用
      exposes: {
        // './exposedModule' 是其他应用将用来引用此模块的路径
        './exposedModule': './src/ExposedModule.js',
      },
      // ...其他配置
    }),
  ],
  // ...其他配置
};

在应用2（App2）中

App2想要使用App1中暴露的模块。

// webpack.config.js for App2
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      // 应用2的名称，必须唯一
      name: 'app2',
      // 远程应用及其暴露模块的映射
      remotes: {
        // 'app1' 对应的是应用1的名称
        // 'http://localhost:3001/remoteEntry.js' 是应用1的远程入口文件URL
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
      // ...其他配置
    }),
  ],
  // ...其他配置
};

第二步：编写和暴露模块

在应用1中，你需要编写你想要暴露的模块。

// src/ExposedModule.js in App1
export default 'Hello from ExposedModule in App1!';

第三步：在应用2中使用暴露的模块

在应用2中，你可以使用动态导入（import()）来加载应用1中暴露的模块。

// src/App.js in App2
import React from 'react';

const ExposedModule = React.lazy(() => import('app1/exposedModule'));

function App() {
  return (
    <div>
      <h1>App2</h1>
      <React.Suspense fallback={<div>Loading...</div>}>
        <ExposedModule />
      </React.Suspense>
    </div>
  );
}

export default App;

注意，这里我们使用了React.lazy()和React.Suspense来处理动态加载的组件。这是因为模块联邦加载模块是异步的，所以我们需要一种方式来处理加载过程中的状态。

第四步：启动应用

确保你已经安装了所有必要的依赖，并且启动了两个应用的开发服务器。然后，当你访问App2时，你应该能够看到从App1暴露的模块加载并显示在页面上。

这个示例展示了如何使用Webpack的模块联邦来在不同的应用之间共享模块。在实际的微前端架构中，你可以有更多的应用和更复杂的模块共享场景，但是基本的配置和使用方法是类似的。

动态加载与代码拆分

动态加载（Dynamic Imports）和代码拆分（Code Splitting）是前端优化中常用的技术，它们可以帮助我们减少应用的初始加载时间，提升用户体验。

动态加载允许我们在运行时按需加载JavaScript模块，而不是在应用启动时一次性加载所有代码。这可以通过Webpack的import()语法来实现。当Webpack遇到import()时，它会自动开始代码拆分，将动态加载的模块拆分成一个单独的chunk，然后按需加载。

代码拆分是动态加载的基础，它将应用的代码拆分成多个小的、独立的块（chunk），每个块可以独立地加载和执行。这意味着用户可以更快地看到应用的首屏内容，而其他非关键的代码可以在后台异步加载。

在微前端中的应用

模块联邦和动态加载在微前端架构中发挥了重要的作用。微前端是一种将多个小型前端应用组合成一个完整应用的架构风格。每个微前端应用都是独立的、可复用的，并且可以使用不同的技术栈进行开发。

在微前端架构中，模块联邦使得每个微前端应用都可以暴露和共享自己的模块，供其他应用使用。这意味着你可以在一个微前端应用中定义一个组件或服务，然后在另一个微前端应用中直接使用它，而不需要复制代码或安装额外的依赖。

动态加载则使得微前端应用可以在运行时按需加载其他应用的代码。例如，当用户导航到一个特定的页面时，你可以动态加载该页面所需的微前端应用的代码。这样可以减少应用的初始加载时间，提升用户体验。

案例分析

假设我们有一个电商网站，它由多个微前端应用组成，包括商品列表、商品详情、购物车和订单等。每个微前端应用都是独立的，可以使用不同的技术栈进行开发。

首先，我们可以使用Webpack的模块联邦功能来构建每个微前端应用。每个应用都可以定义自己的共享模块，并通过Webpack的配置暴露给其他应用。例如，商品列表应用可以暴露一个商品列表组件，供其他应用使用。

然后，在主应用中，我们可以使用动态加载来按需加载每个微前端应用的代码。当用户导航到商品列表页面时，我们可以动态加载商品列表应用的代码，并将其渲染到页面上。同样地，当用户导航到商品详情页面时，我们可以动态加载商品详情应用的代码，并将其渲染到页面上。

通过这种方式，我们可以实现微前端应用之间的模块共享和动态加载，提升应用的性能和可维护性。

代码示例

下面是一个简单的代码示例，展示了如何使用Webpack的模块联邦和动态加载来构建微前端应用。

假设我们有两个微前端应用：app1和app2。app1暴露了一个Hello组件，app2想要使用这个组件。

1. 在app1中暴露Hello组件

// app1/src/Hello.js
export default function Hello() {
  return <h1>Hello from App 1!</h1>;
}

// app1/webpack.config.js
module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Hello': './src/Hello',
      },
      // ...其他配置
    }),
  ],
};

2. 在app2中动态加载和使用Hello组件

// app2/src/App.js
import React, { Suspense, lazy } from 'react';

const Hello = lazy(() => import('app1/Hello'));

function App() {
  return (
    <div>
      <h1>App 2</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <Hello />
      </Suspense>
    </div>
  );
}

export default App;

// app2/webpack.config.js
module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app2',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
      },
      // ...其他配置
    }),
  ],
};

在这个例子中，app1使用ModuleFederationPlugin暴露了Hello组件，而app2则通过配置remotes字段来指定app1的远程入口文件，并使用import()语法动态加载Hello组件。Suspense组件用于在组件加载过程中显示一个加载指示器。

通过这种方式，我们可以实现微前端应用之间的模块共享和动态加载，提升应用的性能和可维护性。实际项目中可能涉及到更多的复杂场景和配置。但是基本的思路和原理是相同的：使用模块联邦来暴露和共享模块，使用动态加载来按需加载代码。

模块联邦和动态加载是构建微前端应用的重要技术，它们使得我们可以更好地组织和管理前端代码，提升开发效率和用户体验。