Module Federation核心库中远程模块加载问题的分析与解决

问题背景

在使用Module Federation进行微前端架构开发时，开发者遇到了一个典型问题：当提供者(provider)应用以打包后的生产模式运行时，消费者(host)应用在开发服务器中无法正确加载远程模块，控制台报错"remoteEntryExports is undefined"。而当提供者应用也处于开发模式时，却能正常工作。

现象分析

从开发者提供的截图可以观察到两个关键现象：

1. 生产模式下的异常行为：当提供者应用使用打包后的输出时，远程模块的加载路径错误地指向了根路径"/"，而不是预期的远程地址。

2. 开发模式下的正常行为：当提供者应用处于开发模式时，远程模块能够正确加载，路径指向了预期的远程地址"http://localhost:3001"。

根本原因

这个问题源于Web应用的资源路径(asset path)配置问题。在生产模式下，Module Federation需要明确知道如何构建远程模块的完整URL路径。当未正确配置assetPrefix时，系统会默认使用根路径"/"，导致无法正确加载远程模块。

解决方案

通过设置assetPrefix: 'auto'可以解决这个问题。这个配置项会告诉构建工具自动确定资源的前缀路径，确保在不同环境下都能生成正确的资源URL。

配置示例

以下是提供者应用的推荐配置示例：

import path from 'path';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
  source: {
    entry: {
      index: './src/bootstrap.jsx'
    },
  },
  output: {
    assetPrefix: 'auto', // 关键配置项
    distPath: {
      root: 'dist'
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      name: 'provider',
      exposes: {
        './App': './src/App'
      },
      shared: [
        'react',
        'react-dom',
        'react-router-dom'
      ]
    })
  ]
});

最佳实践建议

1. 统一配置：建议在提供者和消费者两端都配置assetPrefix: 'auto'，以确保在各种环境下都能正常工作。

2. 环境适配：auto值会根据当前环境自动确定合适的前缀，这在开发和生产环境切换时特别有用。

3. 明确指定：在某些复杂部署场景下，也可以考虑显式指定完整的URL前缀，而不是使用auto。

总结

Module Federation作为微前端架构的核心技术，其远程模块加载机制对资源路径配置十分敏感。通过合理配置assetPrefix，开发者可以确保应用在各种构建模式下都能正确加载远程模块。这个问题也提醒我们，在微前端架构中，资源路径的确定性配置是保证应用正常运行的关键因素之一。