JavaScript模块联邦_微前端架构实现方案-js教程-PHP中文网

JavaScript模块联邦_微前端架构实现方案

夢幻星辰

发布： 2025-11-19 19:24:06

原创

977人浏览过

模块联邦是Webpack 5实现微前端的核心技术，允许运行时动态加载远程应用模块。通过配置exposes暴露子应用组件，remotes在主应用按需引入，实现独立部署、灵活共享依赖与运行时集成，适用于多团队协作、渐进式迁移等场景。

javascript模块联邦_微前端架构实现方案

微前端架构让多个团队可以独立开发、部署前端应用，同时还能在同一个页面中协同工作。模块联邦（Module Federation）是 Webpack 5 提供的一种原生能力，它让 JavaScript 模块可以直接跨应用共享，无需发布到 npm 或构建时打包，真正实现了运行时的模块加载与通信。

什么是模块联邦？

模块联邦允许一个 Webpack 打包的应用在运行时动态加载另一个 Webpack 打包应用中的模块。这意味着你可以把微前端中的子应用当作“远程模块”来使用，主应用能直接引用子应用暴露的组件、函数甚至状态管理模块。

核心优势在于：

真正的独立部署：每个子应用可独立构建、部署，不依赖统一发布流程。
共享依赖更灵活：可配置共享第三方库（如 React、Vue），避免重复加载。
运行时集成：不需要构建时合并代码，主应用在浏览器中按需加载远程模块。

基本实现结构

以主应用（Host）和子应用（Remote）为例，通过 Webpack 配置启用模块联邦。

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

子应用配置（Remote）

子应用需要暴露自己的模块，比如一个 React 组件：

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

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

查看详情

// webpack.config.js (子应用)
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "userApp",
      filename: "remoteEntry.js",
      exposes: {
        "./UserProfile": "./src/components/UserProfile",
      },
      shared: ["react", "react-dom"],
    }),
  ],
};

登录后复制

主应用配置（Host）

主应用远程导入子应用暴露的模块：

// webpack.config.js (主应用)
new ModuleFederationPlugin({
  name: "mainApp",
  remotes: {
    userApp: "userApp@http://localhost:3001/remoteEntry.js",
  },
  shared: ["react", "react-dom"],
});

登录后复制

在主应用中使用远程组件

// App.js
import React, { Suspense } from "react";

const RemoteUserProfile = React.lazy(() => import("userApp/UserProfile"));

function App() {
  return (
    <div>
      <h1>主应用</h1>
      <Suspense fallback="加载中...">
        <RemoteUserProfile />
      </Suspense>
    </div>
  );
}

export default App;

登录后复制