UD5工具箱
微前端架构可视化
工具以直观的图形化方式展示微前端架构中的三个核心组件：Header Remote（端口 3001）、Footer Remote（端口 3002）和 Main Host App（端口 3000）。用户可以清晰地看到各个应用之间的依赖关系和通信路径，理解 Host 应用如何通过模块联邦机制加载和使用 Remote 应用提供的模块。这种可视化的架构展示，让抽象的微前端概念变得触手可及。
Shared Scope 共享作用域展示
Shared Scope 是模块联邦中实现单例模式的关键机制。本工具通过可视化的方式展示共享作用域的工作原理：当多个应用共享同一个依赖（如 React）时，系统如何确保全局只加载一份实例，避免版本冲突和重复加载的问题。用户可以通过实际操作，观察 Singleton 模式在模块联邦中的具体表现。
应用配置面板
工具提供功能完善的应用配置面板，用户可以自由选择应用角色（Host 或 Remote）、设定端口号、选择要暴露的模块以及配置共享依赖项。每一项配置都会实时反映在 Webpack 配置生成区域，帮助用户理解不同配置项对最终构建结果的影响。这种所见即所得的配置体验，大幅降低了学习门槛。
Webpack 配置实时生成
根据用户在配置面板中的选择，工具会实时生成标准的 Webpack ModuleFederationPlugin 配置代码。生成的代码包含完整的 name、filename、exposes、remotes 和 shared 配置项，遵循 Webpack 5 的最佳实践。用户可以直接复制这些配置到自己的项目中使用，实现了从学习到实践的无缝衔接。
运行日志系统
工具内置了详细的运行日志系统，能够记录模块联邦运行过程中的所有关键事件，包括模块请求、Chunk 下载、Shared Scope 初始化、依赖版本协商等。这些日志以时间线的形式展示，帮助开发者追踪系统的运行轨迹，理解每个环节的具体行为。对于学习和调试而言，运行日志都是不可或缺的重要工具。
三步模块加载流程演示
工具将模块联邦的加载过程拆解为三个清晰的步骤：第一步 Host 请求，Host 应用向 Remote 应用发起模块加载请求；第二步下载 Chunk，系统从 Remote 应用下载所需的 JavaScript Chunk 文件；第三步解析渲染，Host 应用解析下载的模块并将其渲染到页面中。每一步都有详细的动画演示和文字说明，帮助开发者完整理解模块的加载生命周期。
常见问题知识库
工具内置了丰富的问题解答知识库，涵盖模块联邦的核心概念和常见疑问。从「什么是模块联邦」到「如何处理版本冲突」，从「Host 与 Remote 的区别」到「remoteEntry.js 的作用」，这些问题解答帮助开发者在学习过程中遇到疑惑时能够快速找到答案。知识库持续更新，确保内容的时效性和准确性。