Webpack微前端运行时加载子应用的核心方案是Module Federation（推荐）和SystemJS集成：前者适用于Webpack 5+同构场景，通过remoteEntry.js动态加载；后者适配异构技术栈，以system格式输出并用System.import加载，二者均需配套样式隔离、JS沙箱、生命周期及通信机制。
Webpack 在微前端主应用中实现运行时加载子应用资源，核心是让主应用不提前打包子应用代码，而是在用户触发（如路由跳转）时，动态拉取并执行远程构建产物。主流且成熟的方式有两种：Module Federation（推荐）和 SystemJS 集成。两者都绕过传统打包依赖，转向运行时模块解析。
用 Module Federation 实现按需加载
这是 Webpack 5+ 原生支持的方案，主应用作为宿主（Host），子应用作为远程模块（Remote），通过 remoteEntry.js 入口文件在运行时加载。
- 子应用需配置
ModuleFederationPlugin，暴露组件或整个应用入口，例如：exposes: { './app': './src/bootstrap' } - 主应用在 Webpack 配置中声明
remotes，指向子应用的remoteEntry.js地址，如：remoteApp: 'remoteApp@https://sub.example.com/remoteEntry.js' - 主应用代码中使用动态
import()加载子应用模块：const { mount } = await import('remoteApp/app');
再调用mount(container)挂载到指定 DOM 节点 - 配合路由（如 React Router），可做到“访问 /order 时才加载订单子应用”，真正按需
用 SystemJS 加载非 Webpack 构建的子应用
当子应用技术栈异构（比如有 Vue2 + webpack4、AngularJS 项目），Module Federation 不适用，SystemJS 可作为通用加载器统一处理。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 子应用需输出为
system格式（Webpack 中设output.libraryTarget = 'system'） - 主应用引入 SystemJS 后，直接调用
System.import('./subapp/entry.js')加载 - 支持
System.unload()卸载模块，便于热更新或切换场景 - 通过
System.config({ map, meta, paths })统一管理共享依赖（如 React、lodash），避免重复加载
关键配套机制不能少
仅加载 JS 文件不够，真实场景还需处理样式隔离、JS 沙箱、生命周期和通信：
立即学习“Java免费学习笔记（深入）”；
- 样式：子应用 CSS 应加前缀或注入
<style scoped>；也可用 Shadow DOM 或 micro-app 的样式代理 - 沙箱：qiankun 自带 Proxy 沙箱；若手写，需拦截
window、document访问，防止污染全局 - 生命周期：主应用需监听子应用的
bootstrap、mount、unmount钩子，协调资源释放 - 通信：推荐用自定义事件（
dispatchEvent）、props 透传或轻量状态库（如 mitt）解耦
实际选型看团队技术栈统一程度——同为 Webpack 5+ 优先 Module Federation；多技术栈混合或需强兼容性，SystemJS 更灵活。两种方式都把构建时依赖移到了运行时，是微前端动态加载的底层支撑。
