@module-federation/data-prefetch 0.0.0-next-20240909062831 → 0.0.0-next-20240911025149

package/CHANGELOG.md

@@ -1,9 +1,9 @@
 @module-federation/data-prefetch
 
-## 0.0.0-next-20240909062831
+## 0.0.0-next-20240911025149
 
 ### Patch Changes
 
 - 3ddab21: feat(@module-federation/data-prefetch): support data prefetch in Module Federation
-  - @module-federation/runtime@0.0.0-next-20240909062831
-  - @module-federation/sdk@0.0.0-next-20240909062831
+  - @module-federation/runtime@0.0.0-next-20240911025149
+  - @module-federation/sdk@0.0.0-next-20240911025149

package/README.md

@@ -1 +1 @@
-Module Federation Data Prefetch
+Module Federation Data Prefetch(https://module-federation.io/zh/guide/performance/prefetch.html)

package/dist/cli/index.d.ts

@@ -1,11 +1,19 @@
-import { moduleFederationPlugin } from '@module-federation/sdk';
+import * as webpack from 'webpack';
 import { WebpackPluginInstance, Compiler } from 'webpack';
+import { moduleFederationPlugin } from '@module-federation/sdk';
 
+declare const RuntimeGlobals: typeof webpack.RuntimeGlobals;
+declare function getFederationGlobalScope(runtimeGlobals: typeof RuntimeGlobals): string;
 declare class PrefetchPlugin implements WebpackPluginInstance {
     options: moduleFederationPlugin.ModuleFederationPluginOptions;
     private _reWriteExports;
     constructor(options: moduleFederationPlugin.ModuleFederationPluginOptions);
     apply(compiler: Compiler): void;
+    static addRuntime(compiler: Compiler, options: {
+        name: string;
+    }): string;
+    static setRemoteIdentifier(): string;
+    static removeRemoteIdentifier(): string;
 }
 
-export { PrefetchPlugin };
+export { PrefetchPlugin, getFederationGlobalScope };

package/dist/cli/index.js

@@ -26,12 +26,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/cli/index.ts
 var cli_exports = {};
 __export(cli_exports, {
-  PrefetchPlugin: () => PrefetchPlugin
+  PrefetchPlugin: () => PrefetchPlugin,
+  getFederationGlobalScope: () => getFederationGlobalScope
 });
 module.exports = __toCommonJS(cli_exports);
 var import_path2 = __toESM(require("path"));
 var import_fs_extra2 = __toESM(require("fs-extra"));
 var import_sdk2 = require("@module-federation/sdk");
+var import_normalize_webpack_path = require("@module-federation/sdk/normalize-webpack-path");
 
 // src/common/constant.ts
 var TEMP_DIR = ".mf";
@@ -65,6 +67,10 @@ var import_sdk = require("@module-federation/sdk");
 var getPrefetchId = (id) => (0, import_sdk.encodeName)(`${id}/${import_sdk.MFPrefetchCommon.identifier}`);
 
 // src/cli/index.ts
+var { RuntimeGlobals, Template } = require((0, import_normalize_webpack_path.normalizeWebpackPath)("webpack"));
+function getFederationGlobalScope(runtimeGlobals) {
+  return `${runtimeGlobals.require || "__webpack_require__"}.federation`;
+}
 var PrefetchPlugin = class {
   constructor(options) {
     this.options = options;
@@ -142,8 +148,54 @@ var PrefetchPlugin = class {
       FederationDataPrefetch: JSON.stringify(asyncEntryPath)
     }).apply(compiler);
   }
+  static addRuntime(compiler, options) {
+    const encodedName = (0, import_sdk2.encodeName)(options.name);
+    if (!compiler.options.context) {
+      throw new Error("compiler.options.context is not defined");
+    }
+    const prefetchEntry = import_path2.default.resolve(
+      compiler.options.context,
+      `node_modules/.mf/${encodedName}/bootstrap.js`
+    );
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.asString([
+      import_fs_extra2.default.existsSync(prefetchEntry) ? Template.indent([
+        "function injectPrefetch() {",
+        `globalThis.__FEDERATION__ = globalThis.__FEDERATION__ || {};`,
+        `globalThis.__FEDERATION__['${import_sdk2.MFPrefetchCommon.globalKey}'] = globalThis.__FEDERATION__['${import_sdk2.MFPrefetchCommon.globalKey}'] || {`,
+        `entryLoading: {},`,
+        `instance: new Map(),`,
+        `__PREFETCH_EXPORTS__: {},`,
+        `};`,
+        `globalThis.__FEDERATION__['${import_sdk2.MFPrefetchCommon.globalKey}']['${import_sdk2.MFPrefetchCommon.exportsKey}'] = globalThis.__FEDERATION__['${import_sdk2.MFPrefetchCommon.globalKey}']['${import_sdk2.MFPrefetchCommon.exportsKey}'] || {};`,
+        `globalThis.__FEDERATION__['${import_sdk2.MFPrefetchCommon.globalKey}']['${import_sdk2.MFPrefetchCommon.exportsKey}']['${options.name}'] = import('${prefetchEntry}');`,
+        "}",
+        `${federationGlobal}.prefetch = injectPrefetch`
+      ]) : "",
+      Template.indent([
+        `if(!globalThis.isMFRemote && ${federationGlobal}.prefetch){`,
+        `${federationGlobal}.prefetch()`,
+        "}"
+      ])
+    ]);
+  }
+  static setRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = true;`]);
+  }
+  static removeRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = false;`]);
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  PrefetchPlugin
+  PrefetchPlugin,
+  getFederationGlobalScope
 });

package/dist/esm/chunk-EZUCZHGV.js

@@ -0,0 +1,11 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw new Error('Dynamic require of "' + x + '" is not supported');
+});
+
+export {
+  __require
+};

package/dist/esm/{chunk-H3DTWHY4.js → chunk-YXTPJG2M.js}

@@ -50,7 +50,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${id} - ${performance.now()}`
+        );
+        const result = Object.keys(exports).map((k) => {
+          const value = instance.prefetch({
+            id,
+            functionId: k
+          });
+          const functionId = k;
+          return {
+            value,
+            functionId
+          };
+        });
+        return result;
+      });
+    });
+    loadingArray.push({
+      id,
+      promise
+    });
+    return options;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      return options;
+    }
+    if (sharedFlag !== strategy) {
+      throw new Error(
+        `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`
+      );
+    }
+    const instance = MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+    let prefetchUrl;
+    if (snapshot.prefetchEntry) {
+      prefetchUrl = getResourceUrl(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      const projectExports = instance.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      return Promise.resolve().then(() => {
+        const exports = instance.getExposeExports(id);
+        logger_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/dist/esm/cli/babel.js

@@ -1,3 +1,5 @@
+import "../chunk-EZUCZHGV.js";
+
 // src/cli/babel.ts
 import path from "path";
 var attribute = "id";

package/dist/esm/cli/index.js

@@ -1,13 +1,18 @@
 import {
   getPrefetchId
 } from "../chunk-VWDP6NMM.js";
+import {
+  __require
+} from "../chunk-EZUCZHGV.js";
 
 // src/cli/index.ts
 import path2 from "path";
 import fs2 from "fs-extra";
 import {
-  encodeName
+  encodeName,
+  MFPrefetchCommon
 } from "@module-federation/sdk";
+import { normalizeWebpackPath } from "@module-federation/sdk/normalize-webpack-path";
 
 // src/common/constant.ts
 var TEMP_DIR = ".mf";
@@ -37,6 +42,10 @@ var fixPrefetchPath = (exposePath) => {
 };
 
 // src/cli/index.ts
+var { RuntimeGlobals, Template } = __require(normalizeWebpackPath("webpack"));
+function getFederationGlobalScope(runtimeGlobals) {
+  return `${runtimeGlobals.require || "__webpack_require__"}.federation`;
+}
 var PrefetchPlugin = class {
   constructor(options) {
     this.options = options;
@@ -114,7 +123,53 @@ var PrefetchPlugin = class {
       FederationDataPrefetch: JSON.stringify(asyncEntryPath)
     }).apply(compiler);
   }
+  static addRuntime(compiler, options) {
+    const encodedName = encodeName(options.name);
+    if (!compiler.options.context) {
+      throw new Error("compiler.options.context is not defined");
+    }
+    const prefetchEntry = path2.resolve(
+      compiler.options.context,
+      `node_modules/.mf/${encodedName}/bootstrap.js`
+    );
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.asString([
+      fs2.existsSync(prefetchEntry) ? Template.indent([
+        "function injectPrefetch() {",
+        `globalThis.__FEDERATION__ = globalThis.__FEDERATION__ || {};`,
+        `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}'] = globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}'] || {`,
+        `entryLoading: {},`,
+        `instance: new Map(),`,
+        `__PREFETCH_EXPORTS__: {},`,
+        `};`,
+        `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}'] = globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}'] || {};`,
+        `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}']['${options.name}'] = import('${prefetchEntry}');`,
+        "}",
+        `${federationGlobal}.prefetch = injectPrefetch`
+      ]) : "",
+      Template.indent([
+        `if(!globalThis.isMFRemote && ${federationGlobal}.prefetch){`,
+        `${federationGlobal}.prefetch()`,
+        "}"
+      ])
+    ]);
+  }
+  static setRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = true;`]);
+  }
+  static removeRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || {}
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = false;`]);
+  }
 };
 export {
-  PrefetchPlugin
+  PrefetchPlugin,
+  getFederationGlobalScope
 };

package/dist/esm/index.js

@@ -1,11 +1,12 @@
 import {
   prefetchPlugin
-} from "./chunk-H3DTWHY4.js";
+} from "./chunk-YXTPJG2M.js";
 import "./chunk-TTJJJ2WZ.js";
 import {
   MFDataPrefetch
 } from "./chunk-57ZXBP7D.js";
 import "./chunk-VWDP6NMM.js";
+import "./chunk-EZUCZHGV.js";
 export {
   MFDataPrefetch,
   prefetchPlugin

package/dist/esm/plugin.js

@@ -1,10 +1,11 @@
 import {
   plugin_default,
   prefetchPlugin
-} from "./chunk-H3DTWHY4.js";
+} from "./chunk-YXTPJG2M.js";
 import "./chunk-TTJJJ2WZ.js";
 import "./chunk-57ZXBP7D.js";
 import "./chunk-VWDP6NMM.js";
+import "./chunk-EZUCZHGV.js";
 export {
   plugin_default as default,
   prefetchPlugin

package/dist/esm/react/index.js

@@ -10,6 +10,7 @@ import {
 import {
   getScope
 } from "../chunk-VWDP6NMM.js";
+import "../chunk-EZUCZHGV.js";
 
 // src/react/hooks.ts
 import { useEffect as useEffect2, useState } from "react";

package/dist/esm/shared/index.js

@@ -1,3 +1,5 @@
+import "../chunk-EZUCZHGV.js";
+
 // src/shared/index.ts
 var sharedStrategy = () => ({
   name: "shared-strategy",

package/dist/esm/universal/index.js

@@ -3,6 +3,7 @@ import {
 } from "../chunk-OIIVUMED.js";
 import "../chunk-57ZXBP7D.js";
 import "../chunk-VWDP6NMM.js";
+import "../chunk-EZUCZHGV.js";
 export {
   prefetch
 };

package/dist/index.js

@@ -234,7 +234,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${id} - ${performance.now()}`
+        );
+        const result = Object.keys(exports).map((k) => {
+          const value = instance.prefetch({
+            id,
+            functionId: k
+          });
+          const functionId = k;
+          return {
+            value,
+            functionId
+          };
+        });
+        return result;
+      });
+    });
+    loadingArray.push({
+      id,
+      promise
+    });
+    return options;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      return options;
+    }
+    if (sharedFlag !== strategy) {
+      throw new Error(
+        `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`
+      );
+    }
+    const instance = MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+    let prefetchUrl;
+    if (snapshot.prefetchEntry) {
+      prefetchUrl = (0, import_sdk4.getResourceUrl)(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      const projectExports = instance.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      return Promise.resolve().then(() => {
+        const exports = instance.getExposeExports(id);
+        logger_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/dist/plugin.js

@@ -230,7 +230,71 @@ var prefetchPlugin = () => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance.getExposeExports(id);
-        logger_default.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger_default.info(
+          `1. Start Prefetch initContainer: ${id} - ${performance.now()}`
+        );
+        const result = Object.keys(exports).map((k) => {
+          const value = instance.prefetch({
+            id,
+            functionId: k
+          });
+          const functionId = k;
+          return {
+            value,
+            functionId
+          };
+        });
+        return result;
+      });
+    });
+    loadingArray.push({
+      id,
+      promise
+    });
+    return options;
+  },
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot;
+    const { name } = remoteInfo;
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      return options;
+    }
+    if (sharedFlag !== strategy) {
+      throw new Error(
+        `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`
+      );
+    }
+    const instance = MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+    let prefetchUrl;
+    if (snapshot.prefetchEntry) {
+      prefetchUrl = (0, import_sdk4.getResourceUrl)(snapshot, snapshot.prefetchEntry);
+    }
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      const projectExports = instance.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      return Promise.resolve().then(() => {
+        const exports = instance.getExposeExports(id);
+        logger_default.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance.prefetch({
             id,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/data-prefetch",
   "description": "Module Federation Data Prefetch",
-  "version": "0.0.0-next-20240909062831",
+  "version": "0.0.0-next-20240911025149",
   "author": "nieyan <nyqykk@foxmail.com>",
   "homepage": "https://github.com/module-federation/core",
   "license": "MIT",
@@ -85,8 +85,8 @@
   },
   "dependencies": {
     "fs-extra": "9.1.0",
-    "@module-federation/sdk": "0.0.0-next-20240909062831",
-    "@module-federation/runtime": "0.0.0-next-20240909062831"
+    "@module-federation/sdk": "0.0.0-next-20240911025149",
+    "@module-federation/runtime": "0.0.0-next-20240911025149"
   },
   "scripts": {
     "dev": "cross-env WATCH=true tsup",

package/src/cli/babel.ts

@@ -1,3 +1,4 @@
+// no used now
 import path from 'path';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 

package/src/cli/index.ts

@@ -6,12 +6,23 @@ import {
   moduleFederationPlugin,
   MFPrefetchCommon,
 } from '@module-federation/sdk';
+import { normalizeWebpackPath } from '@module-federation/sdk/normalize-webpack-path';
 import type { Compiler, WebpackPluginInstance } from 'webpack';
 
 import { TEMP_DIR } from '../common/constant';
 import { fileExistsWithCaseSync, fixPrefetchPath } from '../common/node-utils';
 import { getPrefetchId } from '../common/runtime-utils';
 
+const { RuntimeGlobals, Template } = require(
+  normalizeWebpackPath('webpack'),
+) as typeof import('webpack');
+
+export function getFederationGlobalScope(
+  runtimeGlobals: typeof RuntimeGlobals,
+): string {
+  return `${runtimeGlobals.require || '__webpack_require__'}.federation`;
+}
+
 export class PrefetchPlugin implements WebpackPluginInstance {
   public options: moduleFederationPlugin.ModuleFederationPluginOptions;
   private _reWriteExports: string;
@@ -97,4 +108,60 @@ export class PrefetchPlugin implements WebpackPluginInstance {
       FederationDataPrefetch: JSON.stringify(asyncEntryPath),
     }).apply(compiler);
   }
+
+  static addRuntime(
+    compiler: Compiler,
+    options: {
+      name: string;
+    },
+  ) {
+    const encodedName = encodeName(options.name as string);
+    if (!compiler.options.context) {
+      throw new Error('compiler.options.context is not defined');
+    }
+    const prefetchEntry = path.resolve(
+      compiler.options.context,
+      `node_modules/.mf/${encodedName}/bootstrap.js`,
+    );
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || ({} as typeof RuntimeGlobals),
+    );
+
+    return Template.asString([
+      fs.existsSync(prefetchEntry)
+        ? Template.indent([
+            'function injectPrefetch() {',
+            `globalThis.__FEDERATION__ = globalThis.__FEDERATION__ || {};`,
+            `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}'] = globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}'] || {`,
+            `entryLoading: {},`,
+            `instance: new Map(),`,
+            `__PREFETCH_EXPORTS__: {},`,
+            `};`,
+            `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}'] = globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}'] || {};`,
+            `globalThis.__FEDERATION__['${MFPrefetchCommon.globalKey}']['${MFPrefetchCommon.exportsKey}']['${options.name}'] = import('${prefetchEntry}');`,
+            '}',
+            `${federationGlobal}.prefetch = injectPrefetch`,
+          ])
+        : '',
+      Template.indent([
+        `if(!globalThis.isMFRemote && ${federationGlobal}.prefetch){`,
+        `${federationGlobal}.prefetch()`,
+        '}',
+      ]),
+    ]);
+  }
+
+  static setRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || ({} as typeof RuntimeGlobals),
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = true;`]);
+  }
+
+  static removeRemoteIdentifier() {
+    const federationGlobal = getFederationGlobalScope(
+      RuntimeGlobals || ({} as typeof RuntimeGlobals),
+    );
+    return Template.indent([`${federationGlobal}.isMFRemote = false;`]);
+  }
 }

package/src/plugin.ts

@@ -55,7 +55,6 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     if (exist) {
       return options;
     }
-    // @ts-ignore
     const promise = instance.loadEntry(prefetchUrl).then(async () => {
       const projectExports = instance!.getProjectExports();
       if (projectExports instanceof Promise) {
@@ -63,7 +62,9 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
       }
       return Promise.resolve().then(() => {
         const exports = instance!.getExposeExports(id);
-        logger.info(`1. Start Prefetch: ${id} - ${performance.now()}`);
+        logger.info(
+          `1. Start Prefetch initContainer: ${id} - ${performance.now()}`,
+        );
         const result = Object.keys(exports).map((k) => {
           const value = instance!.prefetch({
             id,
@@ -87,6 +88,80 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     return options;
   },
 
+  afterResolve(options) {
+    const { remoteSnapshot, remoteInfo, id, origin } = options;
+    const snapshot = remoteSnapshot as ModuleInfo;
+    const { name } = remoteInfo;
+
+    const prefetchOptions = {
+      name,
+      remote: remoteInfo,
+      origin,
+      remoteSnapshot: snapshot,
+    };
+    const signal = getSignalFromManifest(snapshot);
+    if (!signal) {
+      return options;
+    }
+
+    const inited = loadingArray.some((info) => info.id === id);
+    if (!inited) {
+      return options;
+    }
+
+    if (sharedFlag !== strategy) {
+      throw new Error(
+        `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`,
+      );
+    }
+
+    const instance =
+      MFDataPrefetch.getInstance(name) || new MFDataPrefetch(prefetchOptions);
+
+    let prefetchUrl;
+    // @ts-expect-error
+    if (snapshot.prefetchEntry) {
+      // @ts-expect-error
+      prefetchUrl = getResourceUrl(snapshot, snapshot.prefetchEntry as string);
+    }
+
+    const index = loadingArray.findIndex((loading) => loading.id === id);
+    // clear cache
+    if (index !== -1) {
+      loadingArray.splice(index, 1);
+    }
+    const promise = instance.loadEntry(prefetchUrl).then(async () => {
+      const projectExports = instance!.getProjectExports();
+      if (projectExports instanceof Promise) {
+        await projectExports;
+      }
+      return Promise.resolve().then(() => {
+        const exports = instance!.getExposeExports(id);
+        logger.info(
+          `1. Start Prefetch afterResolve: ${id} - ${performance.now()}`,
+        );
+        const result = Object.keys(exports).map((k) => {
+          const value = instance!.prefetch({
+            id,
+            functionId: k,
+          });
+          const functionId = k;
+
+          return {
+            value,
+            functionId,
+          };
+        });
+        return result;
+      });
+    });
+
+    loadingArray.push({
+      id,
+      promise,
+    });
+    return options;
+  },
   async onLoad(options) {
     const { remote, id } = options;
     const { name } = remote;