JavaScript内核与高级编程之：`JavaScript` 的 `Module Federation`：其在微前端架构中的依赖共享和动态加载。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位老铁，晚上好！我是你们的老朋友，隔壁老码。今天咱们不聊妹子，聊聊JavaScript里一个挺有意思的东西——Module Federation（模块联邦）。这玩意儿在微前端架构里，就像高速公路上的ETC，能让你代码跑得飞起，省时省力。

一、啥是Module Federation？为啥要搞它？

Module Federation，顾名思义，就是模块的联邦。它允许不同的JavaScript应用，甚至是用不同技术栈（比如React, Vue, Angular）构建的应用，能够共享彼此的模块，并且这些模块可以动态地加载。

想想咱们以前搞前端，遇到依赖共享的问题，要么搞个公共组件库，然后每个应用都引入，改动起来麻烦得要死；要么就直接复制粘贴，代码冗余不说，维护起来简直就是噩梦。

Module Federation就是来解决这个痛点的。它能让你：

代码共享： 不用复制粘贴，直接用别人的模块。
独立部署： 每个应用都可以独立开发、测试、部署，互不影响。
动态加载： 按需加载模块，不用一次性加载所有代码，提升性能。

简单来说，Module Federation就像一个“模块交易所”，大家把自己的模块挂上去，别人可以来买（用），而且还是按需购买（加载）。

二、Module Federation的核心概念

要玩转Module Federation，首先得搞清楚几个核心概念：

Host： 主应用，也可以理解为容器应用，它会消费（使用）其他应用的模块。
Remote： 远程应用，它会暴露（提供）自己的模块给其他应用使用。
Shared Modules： 共享模块，这些模块在Host和Remote之间共享，避免重复加载。

用一个简单的例子来说明：

假设咱们有两个应用：

App1 (Host)： 主要负责展示商品列表。
App2 (Remote)： 主要负责展示商品详情。

App1想要在商品列表中点击某个商品，然后跳转到App2的商品详情页。以前的做法可能是App1需要自己写一个商品详情页，或者直接跳转到App2的完整页面。

有了Module Federation，App1可以直接使用App2的商品详情模块，而不需要自己重复造轮子。App2则会把自己的商品详情模块暴露出来，供App1使用。

三、怎么用Module Federation？（实战演练）

接下来，咱们来撸起袖子，写代码看看怎么用Module Federation。

这里咱们用Webpack 5来演示，因为Module Federation是Webpack 5自带的功能。

1. 创建两个应用：App1 (Host) 和 App2 (Remote)

首先，创建两个文件夹：app1 和 app2。

然后在每个文件夹下分别初始化一个Node.js项目：

cd app1
npm init -y

cd ../app2
npm init -y

2. 安装Webpack和相关依赖

在两个项目下分别安装Webpack和相关依赖：

cd app1
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

cd ../app2
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev

3. 配置Webpack (App1 – Host)

在app1目录下创建一个webpack.config.js文件，内容如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    port: 3000,
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'app1', // 必须，当前应用的名称
      remotes: {
        app2: 'app2@http://localhost:3001/remoteEntry.js', // 声明要使用的远程应用及其入口文件
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

解释：

name: 'app1'：定义当前应用的名字，必须唯一。
remotes：定义要使用的远程应用。app2是远程应用的名字，http://localhost:3001/remoteEntry.js是远程应用的入口文件地址。
shared：定义共享模块。react和react-dom是共享的React库。singleton: true表示只加载一个版本的React，eager: true表示立即加载，避免出现问题。

4. 配置Webpack (App2 – Remote)

在app2目录下创建一个webpack.config.js文件，内容如下：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'http://localhost:3001/', // 必须，指定publicPath，否则加载远程模块时会出错
  },
  devServer: {
    port: 3001,
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'app2', // 必须，当前应用的名称
      filename: 'remoteEntry.js', // 暴露模块的入口文件名称
      exposes: {
        './ProductDetail': './src/ProductDetail', // 暴露的模块及其路径
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true, eager: true },
      },
    }),
  ],
};

解释：

name: 'app2'：定义当前应用的名字，必须唯一。
filename: 'remoteEntry.js'：定义暴露模块的入口文件名称。
exposes：定义要暴露的模块。'./ProductDetail'是暴露的模块名，'./src/ProductDetail'是模块的实际路径。
publicPath：这个很重要，必须指定，否则Host应用加载Remote应用模块时会出错。

5. 创建入口文件和组件 (App1 – Host)

在app1/src目录下创建一个index.js文件，内容如下：

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return (
    <div>
      <h1>App1 - Host Application</h1>
      <p>This is the host application.</p>
      <ProductDetail />
    </div>
  );
};

const ProductDetail = React.lazy(() => import('app2/ProductDetail'));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.Suspense fallback="Loading..."><App /></React.Suspense>);

解释：

React.lazy(() => import('app2/ProductDetail'))：使用React.lazy动态加载app2的ProductDetail模块。
React.Suspense：用于处理异步加载组件时的加载状态。

6. 创建入口文件和组件 (App2 – Remote)

在app2/src目录下创建一个index.js文件，内容如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import ProductDetail from './ProductDetail';

const App = () => {
  return (
    <div>
      <h1>App2 - Remote Application</h1>
      <p>This is the remote application.</p>
    </div>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

在app2/src目录下创建一个ProductDetail.js文件，内容如下：

import React from 'react';

const ProductDetail = () => {
  return (
    <div>
      <h2>Product Detail from App2</h2>
      <p>This is the product detail component from the remote application.</p>
    </div>
  );
};

export default ProductDetail;

7. 创建HTML模板文件

在app1/public和app2/public目录下分别创建index.html文件，内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Federation Example</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

8. 添加 Babel 配置

在 app1 和 app2 的根目录下分别创建 .babelrc 文件，并添加以下内容：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

9. 修改 package.json 添加启动命令

在 app1 和 app2 的 package.json 文件中添加以下启动命令：

"scripts": {
  "start": "webpack serve --mode development"
}

10. 运行应用

分别在app1和app2目录下运行：

cd app1
npm start

cd ../app2
npm start

打开浏览器，访问http://localhost:3000，你应该可以看到App1的页面，并且页面上会显示App2的ProductDetail组件。

恭喜你，你已经成功地使用Module Federation实现了跨应用的模块共享！

四、Module Federation的依赖共享策略

Module Federation的一个重要特性就是依赖共享。它可以避免重复加载相同的依赖，从而提升性能。

Module Federation的依赖共享策略主要有以下几种：

singleton: true： 只加载一个版本的依赖。如果Host和Remote都声明了同一个依赖，并且都设置了singleton: true，那么只会加载一个版本的依赖，并且这个版本会被Host和Remote共享。
eager: true： 立即加载依赖。这可以避免一些潜在的问题，比如依赖的初始化顺序问题。
requiredVersion: 'x.y.z'： 指定依赖的版本范围。如果Host和Remote声明了同一个依赖，但是版本范围不兼容，那么Module Federation会抛出错误。

示例：

// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new ModuleFederationPlugin({
      // ...
      shared: {
        react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
      },
    }),
  ],
};

五、Module Federation的动态加载

Module Federation支持动态加载模块，这意味着你可以按需加载模块，而不是一次性加载所有代码。这可以显著提升应用的性能。

在上面的例子中，咱们使用了React.lazy来实现ProductDetail组件的动态加载。

const ProductDetail = React.lazy(() => import('app2/ProductDetail'));

React.lazy会返回一个Promise，当组件被渲染时，Promise会被resolve，然后组件会被加载。

六、Module Federation的常见问题和解决方案

在使用Module Federation的过程中，可能会遇到一些问题，这里列举一些常见的问题和解决方案：

加载远程模块失败：
- 原因： publicPath配置错误，或者远程应用的服务器没有启动。
- 解决方案： 检查publicPath配置是否正确，确保远程应用的服务器已经启动，并且可以访问。
依赖版本冲突：
- 原因： Host和Remote声明了同一个依赖，但是版本范围不兼容。
- 解决方案： 调整依赖的版本范围，使其兼容。可以使用requiredVersion来指定依赖的版本范围。
模块初始化顺序问题：
- 原因： 依赖的初始化顺序不正确，导致模块无法正常工作。
- 解决方案： 使用eager: true来立即加载依赖，或者调整模块的初始化顺序。
类型定义问题 (TypeScript)：
- 原因： Remote 应用暴露的模块的类型定义 Host 应用无法直接获取，导致类型检查错误。
- 解决方案： 创建共享的类型定义文件，或者使用 TypeScript 的声明合并特性。例如，可以在 Remote 应用中生成 .d.ts 文件，然后在 Host 应用中引用这些文件。

七、Module Federation的优势和局限性

优势：

代码共享： 避免代码重复，提高代码复用率。
独立部署： 每个应用都可以独立开发、测试、部署，互不影响。
动态加载： 按需加载模块，提升性能。
技术栈无关： 可以集成不同技术栈的应用。
易于维护： 每个应用的代码量更少，更容易维护。

局限性：

配置复杂： 需要配置Webpack，学习成本较高。
依赖管理： 需要仔细管理依赖，避免版本冲突。
性能损耗： 动态加载模块会带来一定的性能损耗。
调试困难： 跨应用的调试比较困难。
安全性： 需要考虑远程模块的安全性，避免恶意代码注入。

八、总结

Module Federation是一个强大的工具，它可以让你构建更加灵活、可维护的微前端应用。虽然它的配置比较复杂，但是一旦掌握了它的核心概念和使用方法，你就可以享受到它带来的诸多好处。

总的来说，Module Federation就像一个乐高积木，你可以用它来构建各种各样的应用。只要你掌握了它的拼装方法，你就可以创造出无限可能。

好了，今天的讲座就到这里。希望大家能够学有所获，早日成为Module Federation的大师！谢谢大家！

发表回复 取消回复

发表回复取消回复