J*aScript模块联邦_微前端架构设计_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript模块联邦_微前端架构设计

2025-11-18

浏览次数：次

返回列表

模块联邦是Webpack 5实现微前端的核心技术，支持运行时动态加载远程子应用模块。主应用通过remotes引用子应用，子应用通过exposes暴露组件，shared配置共享依赖。例如主应用配置remotes引入remoteApp@http://localhost:3001/remoteEntry.js，子应用exposes导出Button组件，主应用可直接import Button from 'remoteApp/Button'。架构设计需明确主应用负责布局与路由，子应用专注业务功能，建立运行时通信机制，采用CSS Modules隔离样式，shared中设置requiredVersion确保依赖兼容，并设计加载失败降级方案。适用于多团队协作、系统迁移和插件化场景，但需应对调试复杂、构建产物稳定访问及首屏性能挑战，通过CDN部署、预加载和统一监控保障运行稳定性。

javascript模块联邦_微前端架构设计

微前端架构的核心目标是将一个庞大的前端应用拆分成多个独立、可自治的子应用，实现团队间解耦和独立交付。在众多技术方案中，模块联邦（Module Federation） 由 Webpack 5 原生支持，成为当前最实用的微前端实现方式之一。

什么是模块联邦？

模块联邦允许一个 J*aScript 应用在运行时动态加载另一个构建好的应用中的代码模块，而无需提前打包在一起。这意味着：

主应用可以远程加载子应用的组件或页面
子应用之间能共享公共依赖，避免重复加载
各团队可独立开发、构建和部署自己的应用

它不是简单的资源引用，而是真正的模块级共享，支持函数、组件、状态管理等任意导出内容。

基本配置示例

以 Webpack 5 配置为例，启用模块联邦非常直接。

主应用（容器）配置：

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

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

子应用（远程）配置：

new ModuleFederationPlugin({
  name: "remoteApp",
  filename: "remoteEntry.js",
  exposes: {
    "./Button": "./src/components/Button",
    "./routes": "./src/routes"
  },
  shared: ["react", "react-dom"]
})

配置完成后，主应用就可以像导入本地模块一样使用远程组件：

mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提