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

概述

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

详细分析

• 共享模块层是什么？

  • 允许开发者定义共享模块的层级（如全局、应用特定或功能特定），例如共享react或自定义工具库。
  • 提供细粒度控制，优化依赖共享，减少重复模块实例。

• 关键优势

  • 减少打包体积：通过分层共享，Webpack优化树摇（tree-shaking），避免不必要代码。
  • 版本管理：支持版本化依赖，减少版本冲突。
  • 提升开发体验：清晰的层级划分，便于扩展大型单体仓库或微前端架构。

• 用例示例

  • 在一个单体仓库中，主机应用和多个远程应用需要共享react（全局）和特定工具库（仅限某些远程）。配置示例：

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中。配置示例：

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等选项，控制类型生成。例如：

    interface DtsRemoteOptions {
      extractThirdParty?: boolean; // 提取第三方类型
      exclude?: string[]; // 排除特定类型文件
      typesFolder?: string; // 输出目录
    }
    

  • 错误处理：结合abortOnError和maxRetries处理类型解析失败。
  • CI/CD集成：解决生产环境中类型获取限制，支持流水线验证。

• 挑战与注意事项

  • 配置复杂性：需理解排除或提取的影响，避免遗漏关键类型。
  • 性能开销：提取第三方类型可能增加构建时间。
  • 错误排查：需正确设置tsConfigPath和typesFolder，避免文件缺失错误。

总结

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