微前端架构JavaScript_模块联邦实战-js教程-PHP中文网

微前端架构JavaScript_模块联邦实战

betcha

发布： 2025-11-25 09:20:49

原创

450人浏览过

模块联邦是Webpack 5实现微前端的核心技术，允许应用在运行时动态共享模块。通过配置ModuleFederationPlugin，remote-app暴露Button等组件，host-app以import方式远程加载并渲染，支持按需加载与依赖隔离。结合shared优化依赖、动态加载逻辑及CI/CD管理remotes，可构建高效、灵活的微前端体系，适用于多团队协作场景。

微前端架构javascript_模块联邦实战

微前端架构中，模块联邦（Module Federation）是 Webpack 5 提出的一项革命性功能，它让不同团队、不同项目之间可以像加载本地模块一样共享代码，真正实现运行时的模块级集成。相比传统微前端通过 iframe 或运行时拼接 HTML 的方式，模块联邦更轻量、高效，且天然支持按需加载和版本隔离。

什么是模块联邦？

模块联邦允许一个打包好的应用（通常是 webpack 构建的应用）暴露部分模块，供其他应用在运行时动态加载。这意味着：

主应用可以加载子应用的组件，就像 import 本地文件一样
子应用也可以消费主应用提供的公共依赖或工具函数
各应用可独立开发、部署，互不影响

核心优势在于“运行时模块共享”，而不是构建时打包合并。

实战：搭建主应用与远程子应用

假设我们有两个项目：

立即学习“Java免费学习笔记（深入）”；

host-app（主应用，端口 3000）
remote-app（远程子应用，端口 3001）

1. 配置 remote-app（远程模块提供方）

在 remote-app 的 webpack.config.js 中启用模块联邦：

const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  mode: "development",
  devServer: { port: 3001 },
  plugins: [
    new ModuleFederationPlugin({
      name: "remoteApp",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button",
        "./App": "./src/App",
      },
      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
    }),
  ],
};

登录后复制

2. 配置 host-app（消费者）

host-app 引入 remote-app 暴露的模块：

new ModuleFederationPlugin({
  name: "hostApp",
  remotes: {
    remoteApp: "remoteApp@http://localhost:3001/remoteEntry.js",
  },
  shared: { react: { singleton: true }, "react-dom": { singleton: true } },
});

登录后复制

3. 在 host-app 中使用远程组件

创建一个异步加载组件：

果酱小店开源电商系统源码

果酱小店开源电商系统源码是一个模块化的 B2C 社交电商系统，基于当下最热门的开源技术进行构建，后端基于 PHP 框架 Laravel，前端基于微信小程序，vue.js，实现完全的前后端分离。

查看详情

const RemoteButton = React.lazy(() => import("remoteApp/Button"));

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

登录后复制

启动两个服务后，host-app 就能渲染来自 remote-app 的 Button 组件。

高级用法与最佳实践

模块联邦不只是加载 UI 组件，还能共享逻辑、状态、路由甚至整个子应用。

共享依赖优化

通过 shared 配置避免重复加载 React、Lodash 等库：

shared: {
  react: { singleton: true, eager: true },
  "react-router-dom": { singleton: true },
  lodash: { requiredVersion: "^4.17.0" }
}

登录后复制

设置 singleton: true 可确保全局只有一个实例，防止冲突。

运行时动态加载远程模块

有时需要根据用户权限或环境决定加载哪个模块：

async function loadRemoteComponent(scope, module) {
  await __webpack_init_sharing__("default");
  const container = window.remoteApp; // 来自 remoteEntry
  await container.init(__webpack_share_scopes__.default);
  const factory = await window.remoteApp.get(module);
  return factory();
}

登录后复制

构建部署建议