Webpack模块联邦：微前端架构的新选择

Webpack模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。模块联邦允许不同的Web应用程序（或微前端应用）在运行时动态共享代码，无需传统的打包或发布过程中的物理共享。这意味着每个微应用可以独立开发、构建和部署，同时还能轻松地共享组件、库甚至是业务逻辑。

基础概念

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

实现步骤

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. 远程应用配置

在每个远程应用的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组件可以从容器应用或其他微应用中被导入和使用。

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模块联邦通过简化微前端架构中的代码共享机制，为现代Web应用的开发和维护提供了一种高效且灵活的解决方案。

实战案例：构建一个简单的微前端应用

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

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 },},}),],
};

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. 容器应用消费远程组件

回到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;

4. 启动应用

分别启动两个应用：

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

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

高级用法和最佳实践

1. 动态加载和懒加载

在实际项目中，你可能希望根据用户的行为或特定条件动态加载远程应用。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;

这样，MyWidget组件将在需要时按需加载，提高首屏加载速度。

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 },},
}),

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. 状态管理

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

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: {// ...其他共享库},
}),

6. 错误处理和日志记录

为了确保微前端应用的稳定运行，需要实现全局错误捕获和日志记录。可以使用window.onerror、try...catch语句，或者使用专门的日志库如log4js。

// container-app/src/index.js
window.onerror = function (errorMessage, fileName, lineNumber, columnNumber, error) {// 记录错误信息console.error(errorMessage, fileName, lineNumber, columnNumber, error);// ...其他处理逻辑return true; // 阻止浏览器默认错误处理
};

2024年礼包：2500G计算机入门到高级架构师开发资料超级大礼包免费送！