• 简体中文

      • 数据预取

      prefetch 函数用于预取远程模块的资源和数据，从而提升应用的性能和用户体验。通过在用户访问某个功能之前提前加载所需内容，可以显著减少等待时间。

      该 API 需要先注册 lazyLoadComponentPlugin 插件，才可以使用。

      何时使用

      当你希望在不立即渲染组件的情况下，提前加载其关联的 JavaScript、CSS 或数据时，prefetch 是一个理想的选择。例如，当用户鼠标悬停在某个链接或按钮上时，可以触发 prefetch，以便在用户真正点击时，组件能够更快地呈现。

      API

      interface ModuleFederation {
  prefetch(options: {
    id: string;
    dataFetchParams?: Record<string, any>;
    preloadComponentResource?: boolean;
  }): void;
}

      参数

      type PrefetchOptions = {
  // 远程模块的唯一标识符，格式为 '<remoteName>/<exposedModule>'，例如 'shop/Button'。
  id: string;

  // 如果远程组件存在数据获取函数，设置后会传递给数据获取函数。
  dataFetchParams?: Record<string, any>;

  // 是否预加载组件的资源，包括 JavaScript chunk 和关联的 CSS 文件。默认为 false。
  preloadComponentResource?: boolean;
};

      使用示例

      假设我们有一个远程应用 shop，它暴露了一个组件 Button，并且该组件关联了一个数据获取函数。

      场景 1：仅预取数据

      当用户鼠标悬停在一个将要导航到购物页面的链接上时，我们可以预取该页面所需的数据。

      import { getInstance } from '@module-federation/enhanced/runtime';

const instance = getInstance();

const handleMouseEnter = () => {
  instance.prefetch({
    id: 'shop/Button',
    dataFetchParams: { productId: '12345' },
  });
};

      场景 2：预取数据并预加载组件资源

      为了进一步优化，我们可以在预取数据的同时，也把组件的 JS 和 CSS 文件下载下来。

      import { getInstance } from '@module-federation/enhanced/runtime';

const instance = getInstance();

const handleMouseEnter = () => {
  instance.prefetch({
    id: 'shop/Button',
    dataFetchParams: { productId: '12345' },
    preloadComponentResource: true,
  });
};

      通过灵活使用 prefetch，您可以根据应用的具体场景和用户行为，精细地控制资源的加载时机，从而优化应用性能。