Module Federation远程组件不可用时加载本地替代组件方案咨询

核心思路 #

把远程组件的可用性检查从webpack构建阶段移到应用运行阶段，让用户每次访问时都执行可用性检测，根据结果动态加载对应组件。

步骤1：修改模块联邦的远程配置（移除构建时静态判断） #

当前moduleFederation.js里的fetch是在webpack构建时执行的，无法实现每次访问都检查。需要改成运行时动态加载逻辑：

客户端配置调整 #

替换client下的remotes配置，使用带错误回退的动态加载函数：

// moduleFederation.js - client 部分
remotes: {
  app2: lazyLoadRemoteClient('http://localhost:3002/server/remoteEntry.js', 'app2')
},

同时完善lazyLoadRemoteClient函数，添加加载失败时的本地组件回退：

function lazyLoadRemoteClient(remoteUrl, appName) {
  return `promise new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = '${remoteUrl}'

    console.log('lazyLoadRemote', script.src);

    script.onload = () => {
      const proxy = {
        get: (request) => window.${appName}.get(request),
        init: (arg) => {
          try {
            return window.${appName}.init(arg)
          } catch(e) {
            console.log('remote container already initialized', e)
          }
        }
      }
      resolve(proxy)
    }

    // 远程脚本加载失败时，加载本地替代组件
    script.onerror = () => {
      import('./err/errors.js').then(localModule => {
        resolve({
          get: () => Promise.resolve(localModule.default),
          init: () => Promise.resolve()
        })
      })
    }

    document.head.appendChild(script);
  })`;
}

服务端配置调整 #

同样修改server下的remotes，并修正lazyLoadRemoteServer的逻辑：

// moduleFederation.js - server 部分
remotes: {
  app2: lazyLoadRemoteServer('http://localhost:3002/server/remoteEntry.js', 'app2')
},

完善服务端的错误回退逻辑（修正拼写错误+正确加载本地组件）：

function lazyLoadRemoteServer(remoteUrl, appName) {
  return `promise new Promise((resolve, reject) => {
    fetch('${remoteUrl}')
      .then((response) => {
        if (!response.ok) {
          throw Error(response.statusText);
        }
        return response.text();
      })
      .then(() => {
        // 远程可用时加载远程容器
        const proxy = {
          get: (request) => require('${appName}').get(request),
          init: (arg) => {
            try {
              return require('${appName}').init(arg)
            } catch(e) {
              console.log('remote container already initialized', e)
            }
          }
        }
        resolve(proxy)
      }).catch(function (error) {
        // 远程不可用时加载本地组件
        import('./../../error/errors.js').then(({ default: LocalComponent }) => {
          resolve({
            get: () => Promise.resolve(LocalComponent),
            init: () => Promise.resolve()
          })
        })
      });
  }); `
}

步骤2：React组件层增强控制（可选） #

如果需要更灵活的状态控制（比如自定义错误提示、重试逻辑），可以修改app/index.js的组件加载逻辑：

import React from 'react';
import loadable from '@loadable/component';

// 定义本地替代组件
const LocalLoginFallback = () => <div>稍后再来</div>;

const Login_Register = loadable(async () => {
  try {
    // 优先尝试加载远程组件
    const remoteModule = await import('app2/Login_Register');
    return remoteModule;
  } catch (error) {
    console.error('加载远程登录组件失败:', error);
    // 加载失败时返回本地组件
    return { default: LocalLoginFallback };
  }
}, {
  fallback: <div>loading content...</div>,
});

function App() {
  return (
    <>
      gggg
      <Login_Register />
      fghfghfgh
    </>
  )
}

export default App;

关键注意事项 #

• 不要在webpack配置中写运行时逻辑：webpack配置代码是构建阶段执行的，无法实现每次访问都检查远程服务状态。
• 覆盖所有错误场景：客户端要处理脚本加载失败，服务端要处理fetch请求失败，确保所有异常都能触发本地组件加载。
• 服务端渲染兼容：服务端逻辑要使用Node.js兼容的API，避免调用浏览器专属方法。

内容的提问来源于stack exchange，提问作者Peter