模块联邦本身不自动按需加载，而是提供运行时通过 import() 动态加载远程模块的能力；真正的按需加载由 import() 调用位置和条件决定，如事件回调或路由懒加载。
模块联邦不是“让子应用自动按需加载”的开关，它本身不决定加载时机，而是提供一种运行时可被 import() 调用的远程模块能力。真正的按需加载，由你调用 import() 的位置和条件决定。
为什么 import() 是按需加载的关键入口
模块联邦暴露的模块（比如 ./Button）不会在主应用启动时自动下载，必须显式触发动态导入。Webpack 会把 import("remoteApp/Button") 编译成一个独立 chunk，并在执行时发起对 remoteEntry.js 的请求，再从中加载目标模块。
- 写成静态
import Button from "remoteApp/Button"会直接报错——模块联邦不支持静态导入远程模块 - 如果在组件顶层直接写
import("./Button")，它会在组件定义时就加载，不算真正“按需”（比如用户还没点开该功能页） - 推荐放在事件回调、路由懒加载、或条件判断之后，例如：
onClick={() => import("remoteApp/Button").then(...)} - Vite 用户注意：
@originjs/vite-plugin-federation同样只支持import()，且路径必须与remotes配置中的名称前缀完全一致（如remoteApp/Button，不能少写remoteApp/）
shared 配置写错会导致重复加载或白屏
shared 不是“声明用了哪些库”，而是协调多个应用之间同一依赖的实例复用策略。写错最常见后果是 React 渲染失败、Hooks 报错或样式丢失。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
react和react-dom必须同时配置singleton: true，否则两个子应用各持一份 React，useState等 Hook 就会失效 -
eager: true表示主应用构建时就提前初始化该共享模块，适合基础库；但若子应用也设了eager，可能引发初始化顺序冲突 - 第三方库如
lodash建议设requiredVersion: "^4.17.0"，避免主应用用 4.17、子应用用 4.20 导致行为不一致 - 自定义工具函数或状态管理实例（如
useAuth）不能直接放shared，要先封装成包，再通过exposes暴露，否则无法跨应用传递上下文
跨框架共享组件时，remoteEntry.js 的 publicPath 必须可访问
主应用执行 import("remoteApp/Button") 时，会先请求 http://xxx/remoteEntry.js。这个 URL 由远程应用的 output.publicPath 决定，不是随便写的。
- 开发阶段：Remote 应用 devServer 的
publicPath（如"http://localhost:3001/"）必须和 Host 的remotes字符串中地址完全匹配，包括协议、端口、末尾斜杠 - 生产阶段：Remote 构建后上传到 CDN，
publicPath要设为 CDN 地址（如"https://cdn.example.com/remote-app/"），且确保该地址能被主应用所在域名正常请求（必要时配 CORS） - 本地调试时别用
file://协议，浏览器会拦截跨源请求；可用http-server或 webpack-dev-server 启一个本地服务来托管 remoteEntry.js - Vue3 主应用里加载 React 子组件，除了
import()，还需确保react和react-dom已通过shared正确注入，否则即使代码加载成功也会因缺少运行时而白屏
最容易被忽略的是 shared 的版本协商逻辑和 publicPath 的实际可达性——它们不出现在控制台报错里，但会让整个远程模块静默失败。上线前务必用浏览器 Network 面板确认 remoteEntry.js 和后续 chunk 是否 200 加载，再检查 console 是否有 React duplicate version warning。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
