Webpack5 模块联邦

一、模块联邦

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

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

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

二、实现步骤

实现模块联邦通常会涉及两方：

• 容器应用（Container）：作为微前端架构的宿主，负责加载和协调各个微应用。
• 远程应用（Remote）：独立的微应用，可以暴露自己的模块给其他应用使用，也可以消费来自其他应用的模块。

2.1. 容器应用配置

在容器应用的webpack.config.js中，使用ModuleFederationPlugin来声明远程微应用的来源。

// webpack.config.js (Container)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'container',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js',
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

其中，remotes字段指定了远程微应用的名称和其远程入口文件URL。shared配置则指明了哪些模块应该作为单例共享，比如React和ReactDOM，以避免重复加载。

2.2 远程应用配置

在每个远程应用的webpack.config.js中，同样使用ModuleFederationPlugin，但这次是用来暴露自己的模块，如下所示。

// webpack.config.js (Remote App1)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './MyComponent': './src/components/MyComponent',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

exposes字段定义了哪些模块将对外暴露。在这个例子中，MyComponent组件可以从容器应用或其他微应用中被导入和使用。

2.3 消费远程模块

在容器应用或另一个远程应用中，可以直接导入远程暴露的模块。

// In a component of Container or another Remote App
import MyComponent from 'app1/MyComponent';

function App() {
  return (
    <div>
      <h1>Container App</h1>
      <MyComponent />
    </div>
  );
}

export default App;

这样设计的好处是：

• 独立开发和部署：每个微应用可以独立开发、构建和部署，提高了开发效率和部署灵活性。
• 按需加载：只有当某个模块真正被使用时，才会加载对应的远程代码，优化了首屏加载时间和整体性能。
• 版本管理和隔离：每个微应用可以自由升级其依赖，避免了版本冲突问题。
• 易于维护和扩展：模块联邦的松耦合特性使得添加或移除微应用变得简单快捷。

三、项目实战

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

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

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

接下来，我们通过一个简单的例子来演示如何使用Webpack模块联邦构建两个微应用： 容器应用和远程应用。

3.1 创建容器应用

创建一个新的React应用作为容器应用，如下所示。

npx create-react-app container-app
cd container-app

安装webpack和webpack-cli（注意，由于create-react-app内部已包含Webpack，通常不需要单独安装，这里仅为演示目的）。

npm install webpack webpack-cli --save-dev

接下来，修改package.json，增加一个启动脚本来配置Webpack。

"scripts": {
  "start": "webpack serve --config webpack.config.js",
  // ...
}

创建webpack.config.js，配置Module Federation Plugin：

// webpack.config.js (Container App)
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
    new ModuleFederationPlugin({
      name: 'containerApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3010/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

3.2 创建远程应用

创建一个远程应用：

npx create-react-app remote-app
cd remote-app

接下来，修改package.json，增加启动脚本，并安装webpack和webpack-cli：

npm install webpack webpack-cli --save-dev

在remote-app的webpack.config.js中配置Module Federation Plugin以暴露组件。

// webpack.config.js (Remote App)
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './MyWidget': './src/MyWidget',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

在remote-app/src目录下创建MyWidget.js组件。

// MyWidget.js
import React from 'react';

const MyWidget = () => {
  return <h1>Hello from Remote App!</h1>;
};

export default MyWidget;

3.3 容器应用消费远程组件

回到container-app，在需要的地方导入远程组件：

// container-app/src/App.js
import React from 'react';
import MyWidget from 'remoteApp/MyWidget';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyWidget />
      </header>
    </div>
  );
}

export default App;

3.4 启动应用

分别启动两个应用，在浏览器中访问容器应用，你应该能看到来自远程应用的组件被成功加载和显示。

# 在远程应用目录
npm start --port 3010
# 在容器应用目录
npm start

四、高级用法

4.1 动态加载

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

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

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

Webpack模块联邦支持异步加载，只需在导入时使用import()函数即可。

// container-app/src/App.js
import React, { lazy, Suspense } from 'react';
const MyWidget = lazy(() => import('remoteApp/MyWidget'));

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>Loading...</div>}>
        <MyWidget />
      </Suspense>
    </div>
  );
}

export default App;

4.2 版本管理和依赖管理

在微前端架构中，确保不同应用之间的依赖版本兼容是关键。使用ModuleFederationPlugin的shared配置，你可以指定共享模块的版本范围和加载策略（例如，singleton、strictVersion等）

javascript
// webpack.config.js
new ModuleFederationPlugin({
  // ...
  shared: {
    react: { version: '^17.0.0', singleton: true },
    'react-dom': { version: '^17.0.0', singleton: true },
  },
}),

4.3 路由集成

在微前端架构中，路由管理是一个重要的组成部分。你可以使用像react-router-dom这样的库，结合Microfrontends-Router或自定义解决方案来实现跨应用的路由跳转。

// container-app/src/Routes.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App1 from './App1';
import App2 from './App2';

function Routes() {
  return (
    <Router>
      <Switch>
        <Route path="/app1" component={App1} />
        <Route path="/app2" component={App2} />
      </Switch>
    </Router>
  );
}

export default Routes;

4.4 状态管理

对于共享状态的需求，可以使用Redux、MobX或Context API等状态管理库，或者专门针对微前端设计的状态管理库如single-spa-redux、qiankun的store解决方案等。

4.5 共享服务和公共库

除了组件外，还可以共享服务和公共库。例如，创建一个专门的远程应用来提供API服务，或者共享一个公共的HTTP库。

// webpack.config.js (Remote App for Services)
new ModuleFederationPlugin({
  name: 'services',
  filename: 'remoteEntry.js',
  exposes: {
    './ApiService': './src/services/ApiService',
    './HttpLibrary': './src/libs/http-library',
  },
  shared: {
    // ...其他共享库
  },
}),

总的来说，Webpack模块联邦作为Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。它允许不同的Web应用程序（或微前端应用）在运行时动态共享代码，无需传统的打包或发布过程中的物理共享。