Module Federation v0.12新特征详解

功能(增强)：支持共享模块层

概述

此功能在 @module-federation/enhanced 包中引入了共享模块层支持。Module Federation允许多个JavaScript应用在运行时动态共享代码。共享模块层通过分层或分组方式管理共享依赖，提升了模块组织的灵活性。

详细分析

共享模块层是什么？
- 允许开发者定义共享模块的层级（如全局、应用特定或功能特定），例如共享react或自定义工具库。
- 提供细粒度控制，优化依赖共享，减少重复模块实例。
关键优势
- 减少打包体积：通过分层共享，Webpack优化树摇（tree-shaking），避免不必要代码。
- 版本管理：支持版本化依赖，减少版本冲突。
- 提升开发体验：清晰的层级划分，便于扩展大型单体仓库或微前端架构。
用例示例
- 在一个单体仓库中，主机应用和多个远程应用需要共享react（全局）和特定工具库（仅限某些远程）。配置示例：

js 复制代码

import { createModuleFederationConfig } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  shared: {
    react: { singleton: true, version: '18.3.1' }, // 全局层
    'custom-utils': { singleton: false, layer: 'feature-specific' }, // 功能特定层
  },
});

确保react全局共享，custom-utils仅在特定层共享，减少冲突。

技术考量
- 配置：可能在shared属性中新增layer选项，定义共享范围。
- 局限性：需谨慎规划层级，避免单例模块导致的状态问题。
- 适用场景：适合Nx等单体仓库，优化大型微前端项目。

2. 功能(dts-plugin)：支持排除、提取、指定第三方DTS

概述

此功能增强了@module-federation/dts-plugin，用于生成Module Federation模块的TypeScript声明文件（.d.ts）。新增支持排除、提取和指定第三方.d.ts文件，提升类型安全和开发体验。

详细分析

功能内容
- 排除：从生成的.d.ts文件中排除不需要的第三方类型。
- 提取：将第三方类型提取到单独文件，确保输出精简。
- 指定：允许明确定义第三方.d.ts文件的位置或内容。
关键优势
- 提升类型安全：排除无关类型，生成更精确的.d.ts，减少类型错误。
- 优化模块集成：确保主机和远程模块的类型一致，适配复杂依赖关系。
- 灵活性：开发者可自定义类型生成，适配项目需求。
用例示例
- 远程应用暴露React组件，主机应用消费。远程使用ts-essentials库，但无需将其类型包含在.d.ts中。配置示例：

js 复制代码

import { createModuleFederationConfig } from '@module-federation/enhanced';

export default createModuleFederationConfig({
  dts: {
    generateTypes: {
      extractThirdParty: false, // 排除第三方类型
      typesFolder: 'custom-types', // 指定输出目录
    },
    consumeTypes: {
      remoteTypeUrls: async () => ({
        remote1: {
          alias: 'remote1-alias',
          api: 'http://localhost:8081/custom-dir/@mf-types.d.ts',
        },
      }),
    },
  },
});

确保生成的类型精简，主机正确解析类型。

技术细节
- 配置选项 ：新增extractThirdParty和exclude等选项，控制类型生成。例如：
  ts 复制代码
```
interface DtsRemoteOptions {
  extractThirdParty?: boolean; // 提取第三方类型
  exclude?: string[]; // 排除特定类型文件
  typesFolder?: string; // 输出目录
}
```
- 错误处理：结合abortOnError和maxRetries处理类型解析失败。
- CI/CD集成：解决生产环境中类型获取限制，支持流水线验证。
挑战与注意事项
- 配置复杂性：需理解排除或提取的影响，避免遗漏关键类型。
- 性能开销：提取第三方类型可能增加构建时间。
- 错误排查：需正确设置tsConfigPath和typesFolder，避免文件缺失错误。

总结

共享模块层 (#3276)：优化依赖管理，减少打包体积，提升微前端项目的可扩展性，适合大型单体仓库。
DTS插件增强 (#3692)：提供灵活的类型生成控制，生成精简且准确的.d.ts文件，改善TypeScript用户体验。