资源重试插件

资源重试插件用于在资源加载失败时进行重试，以增加资源加载的成功率。在 Module Federation 中我们提供重试插件 RetryPlugin 来增加资源重试机制，这对于远程应用的加载来说可提高应用的稳定性。

安装

资源重试插件是由@module-federation/retry-plugin 包提供的，我们先来安装它

npm

yarn

pnpm

bun

npm add @module-federation/retry-plugin --save

使用方法

RetryPlugin 为运行时插件，我们可以通过构建插件的 runtimePlugin 注册此插件或在运行时进行插件注册，并配置重试参数和重试逻辑等：

NOTE

注意

构建插件中注册和运行时注册两种方式选择任意一种即可，不要重复注册
推荐尽量在构建插件中注册，这样能将 RetryPlugin 插件注册时机尽可能提前，避免因资源请求失败导致项目无法启动，无法进入运行时进行重试插件的注册，从而无法进行资源重试

方式一：构建插件中注册

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

export default defineConfig({
  plugins: [
    pluginReact(),
    pluginModuleFederation({
      ...,
+     runtimePlugins: [
+       path.join(__dirname, './src/runtime-plugin/retry.ts'),
+     ],
    }),
  ],
});

// ./src/runtime-plugin/retry.ts
import { RetryPlugin } from '@module-federation/retry-plugin';
const retryPlugin = () => RetryPlugin({
    fetch: {},
    script: {}
})
export default retryPlugin;

方式二：运行时注册

import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

init({
  name: 'federation_consumer',
  remotes: [],
  plugins: [
    RetryPlugin({
      fetch: {},
      script: {},
    }),
  ],
});

需要重试的资源分为两种类型：fetch 类型和 script 类型，这两种资源类型我们分别通过 fetch 参数和 script 参数进行重试逻辑控制。

Type

const RetryPlugin: (params: RetryPluginParams) => FederationRuntimePlugin;

type RetryPluginParams = {
  fetch?: FetchWithRetryOptions; // fetch retry options
  script?: ScriptWithRetryOptions; // script retry options
};

type FetchWithRetryOptions = {
  url?: string;
  options?: RequestInit;
  retryTimes?: number;
  retryDelay?: number;
  fallback?: (url: string) => string;
}

type ScriptWithRetryOptions = {
  retryTimes?: number;
  retryDelay?: number;
  moduleName?: Array<string>;
  cb?: (resolve: (value: unknown) => void, error: any) => void;
}

RetryPluginParams 类型说明

RetryPluginParams 是用于配置 RetryPlugin 的参数类型，包含了两种资源类型的重试选项：fetch 和 script。

属性

fetch: FetchWithRetryOptions（可选）
- 用于配置 fetch 类型资源的重试选项。
script: ScriptWithRetryOptions（可选）
- 用于配置 script 类型资源的重试选项。

FetchWithRetryOptions 类型说明

url:
- string
- 可选。当不设置时对于所有加载失败的 URL 会默认进入重试逻辑
- 需要重试的资源的 URL。
options:
- RequestInit
- 可选
- 传递给 fetch 请求的选项。
retryTimes:
- number
- 可选
- 重试的次数，默认为 3。
retryDelay:
- number
- 可选
- 每次重试之间的延迟时间（毫秒）。
fallback:
- () => string
- 可选
- 所有重试失败后，返回一个备用资源的 URL。

ScriptWithRetryOptions 类型说明

retryTimes:
- number
- 可选
- 重试的次数，默认为 3。
retryDelay:
- number
- 可选
- 每次重试之间的延迟时间（毫秒）。
moduleName:
- Array<string>
- 可选
- 模块名称列表，值为模块名称或模块别名。用于标识需要重试的模块。如果不设置，则默认对所有加载失败的模块进行重试。
cb:
- (resolve: (value: unknown) => void, error: any) => void
- 可选
- 回调函数，重试失败后的回调

完整的配置可参考如下配置：

import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { RetryPlugin } from '@module-federation/retry-plugin';

init({
  name: 'federation_consumer',
  remotes: [],
  plugins: [
    RetryPlugin({
      fetch: {
        // the retry resource url
        url: 'http://localhost:2001/-mf-manifest.json',
        // after all retried failed, set a fallback function to guarantee a fallback resource
        fallback: () => 'http://localhost:2002/mf-manifest.json',
      },
      script: {
        // the retry times
        retryTimes: 3,
        // the retry delay
        retryDelay: 1000,
        // the module name list that need to be retried, defualt behavior is to retry all modules
        moduleName: ['remote1'],
        // the callback function that will be called after all retried failed
        cb: (resolve, error) => {
          return setTimeout(() => {
            resolve(error);
          }, 2000);
        },
      },
    }),
  ],
});

ON THIS PAGE

资源重试插件#

安装#

使用方法#

方式一：构建插件中注册#

方式二：运行时注册#

Type#

RetryPluginParams 类型说明#

属性#

FetchWithRetryOptions 类型说明#

ScriptWithRetryOptions 类型说明#