javascript - 网络调用失败的 Webpack5 模块联合后备

Question

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

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

Answer 1

我找到了一个决定。

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

注意钩子 - useDynamicScript和 handlers onload和onerror

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

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