网络调用失败的 Webpack5 模块联合后备答案

【问题标题】：Webpack5 Module Federation fallback for failed network call网络调用失败的 Webpack5 模块联合后备
【发布时间】：2021-02-11 09:11:08
【问题描述】：

我最近制作了一个联合模块主机，用于联合站点的页眉和页脚。一切都按预期工作，但如果对联合主机的请求失败，我会尝试构建一些后备。

new ModuleFederationPlugin({
      name: 'app',
      remotes: {
        app2: 'app2@https:/example.com/remoteEntry.js',
        
      },
      shared: { react: { singleton: true, eager: true }, 'react-dom': { singleton: true, eager: true } },
    }),

如果我阻止对 https:/example.com/remoteEntry.js 的请求，我会收到下面的 webpack 错误。理想情况下，我想加载一个基本的后备标题，或者只是没有标题而不是页面完全死亡

(error: https://example.com/remoteEntry.js1)
while loading "./Footer" from webpack/container/reference/app2

【问题讨论】：

你找到解决办法了吗？
Jack Herrington 的本教程讨论了回退到同一联合模块的 npm 版本。可能是你需要的m.youtube.com/watch?v=K-yQB9YGmgE

标签： javascript node-modules federation webpack-5

【解决方案1】：

我找到了一个决定。

查看这篇文章https://habr.com/ru/post/554682/ - 这篇文章是俄文的，但您可以使用翻译器。

注意钩子 - useDynamicScript 和处理程序 onload 和 onerror

重点是独立检查远程主机是否有remoteEntry.js。如果 remoteEntry.js 不可用，请不要下载远程组件，否则尝试下载。在这种情况下，组件加载的概率非常高。

但是如果在加载remoteEntry.js的时候出现错误，我们会处理，不会把错误抛到控制台。

【讨论】：