微前端中子应用加载主应用公共模块的核心是模块联邦运行时共享机制：主应用作为Host暴露shared依赖与exposes模块，子应用作为Remote声明复用，双方需包名、版本、shareScope严格对齐，由Webpack统一协调实例复用。
微前端中子应用加载主应用的公共模块，核心不是“子去拉主”，而是通过共享机制让双方共用同一份模块实例——主应用作为 Host 暴露共享依赖，子应用作为 Remote 声明复用，由模块联邦（Module Federation）在运行时统一协调。
主应用需主动暴露并共享公共模块
主应用不能只“提供接口”，必须在 Webpack 配置中明确声明哪些模块可被远程复用，且指定版本策略：
- 在
ModuleFederationPlugin.shared中列出公共库（如 React、lodash、utils、hooks），并设置singleton: true和requiredVersion - 若需暴露自定义工具模块（如
@shared/api），可通过exposes显式导出：'./api': './src/shared/api/index.js' - 确保主应用的
remoteEntry.js可被子应用跨域访问（CORS 配置 + HTTPS 或 localhost 调试）
子应用按需导入，不直接 fetch 或 import() 远程 URL
子应用不手动请求主应用的 JS 文件，而是使用标准 ESM 语法或动态 import()，由 Webpack 运行时自动解析为共享实例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 静态导入：
import { request } from '@shared/api';—— Webpack 构建时识别为 shared 依赖，运行时从 Host 获取单例 - 动态导入：
const { Modal } = await import('hostApp/Modal');—— 若主应用通过exposes暴露了该路径，则子应用可直接加载 - 避免写
import('https://host.com/remoteEntry.js').then(...)：这绕过 Module Federation 机制，失去共享与版本控制能力
关键配置要双向对齐
共享生效的前提是主子两端对同一模块的描述一致：
立即学习“Java免费学习笔记（深入）”；
- 包名/别名必须相同（如都用
@shared/utils），否则 Webpack 视为两个不同模块 - 版本约束需兼容：主应用设
requiredVersion: '^1.2.0'，子应用的package.json中对应依赖版本须满足该范围 - 构建时启用
shareScope: 'default'（默认值），确保主子使用同一共享作用域
运行时验证与调试技巧
加载是否走共享路径，不能只看代码，要看实际加载行为：
- 打开浏览器开发者工具 → Network 标签，筛选
js请求：若看到hostApp/xxx.js加载，说明走的是远程模块；若只有chunk-xxx.js且无 host 域名，说明已复用主应用本地实例 - 在子应用中打印
import('react').then(m => console.log(m.default === window.React))，返回true即表示 React 实例共享成功 - 检查控制台是否有
[ModuleFed] shared module conflict类警告，提示版本不匹配或 scope 不一致
