fix(data-prefetch): apply DataPrefetchPlugin on demand (#3061)

2heal1 · web-flow · commit 22a3b834dcae · 2024-10-09T17:08:23.000+08:00
diff --git a/.changeset/grumpy-avocados-cheat.md b/.changeset/grumpy-avocados-cheat.md
@@ -0,0 +1,7 @@
+---
+'@module-federation/data-prefetch': patch
+'@module-federation/enhanced': patch
+'@module-federation/sdk': patch
+---
+
+fix(data-prefetch): apply DataPrefetchPlugin on demand
diff --git a/.changeset/swift-pants-rescue.md b/.changeset/swift-pants-rescue.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/data-prefetch': patch
+---
+
+fix(data-prefetch): set sharedStrategy in build options instead of using runtime plugin
diff --git a/apps/manifest-demo/3010-rspack-provider/src/components/ButtonOldAnt.tsx b/apps/manifest-demo/3010-rspack-provider/src/components/ButtonOldAnt.tsx
@@ -1,10 +1,10 @@
 import Button from 'antd/lib/button';
 import { version } from 'antd/package.json';
 import * as stuff from './stuff.module.css';
-console.log(stuff);
 
 export default function ButtonOldAnt() {
   return (
+    // @ts-ignore
     <Button className={stuff['test-remote2'] + ' test-remote2'}>
       Button from antd@{version}
     </Button>
diff --git a/apps/manifest-demo/README.md b/apps/manifest-demo/README.md
@@ -13,5 +13,5 @@ This example demos manifest
 Run `pnpm run app:manifest:dev` to start examples
 
 - manifest-webpack-host: [localhost:3013](http://localhost:3013/)
-  - view http://localhost:3008/basic to see the basic usage with manifest provider , just the same as js entry provider.
-  - view http://localhost:3008/preload to see manifest provider can use preloadRemote to optimize page performance
+  - view http://localhost:3013/basic to see the basic usage with manifest provider , just the same as js entry provider.
+  - view http://localhost:3013/preload to see manifest provider can use preloadRemote to optimize page performance
diff --git a/apps/manifest-demo/webpack-host/webpack.config.js b/apps/manifest-demo/webpack-host/webpack.config.js
@@ -46,6 +46,7 @@ module.exports = composePlugins(withNx(), withReact(), (config, context) => {
           requiredVersion: '^18.3.1',
         },
       },
+      dataPrefetch: true,
       experiments: { federationRuntime: 'hoisted' },
       runtimePlugins: [path.join(__dirname, './runtimePlugin.ts')],
     }),
diff --git a/apps/website-new/docs/en/practice/performance/prefetch.mdx b/apps/website-new/docs/en/practice/performance/prefetch.mdx
@@ -125,13 +125,22 @@ export default function Button () {
 };
 ```
 
-3. Set `dataPrefetch: true` in the producer's ModuleFederationPlugin configuration
+3. Set `dataPrefetch: true` in the provider's ModuleFederationPlugin configuration
 ```ts
 new ModuleFederationPlugin({
   // ...
   dataPrefetch: true
 }),
 ```
+
+4. Set `dataPrefetch: true` in the consumer's ModuleFederationPlugin configuration
+```ts
+new ModuleFederationPlugin({
+  // ...
+  dataPrefetch: true
+}),
+```
+
 This completes the interface pre-request. After `Button` is used by the hosts, the interface request will be sent out in advance (it will be sent when the js resource is loaded, and the normal project needs to wait until the component is rendered).
 In the above example, `Button` will first render `loading...`, and then display the data after 2s
 Click `Resend request with parameters` to re-trigger the request and add parameters to update the component
diff --git a/apps/website-new/docs/zh/practice/performance/prefetch.mdx b/apps/website-new/docs/zh/practice/performance/prefetch.mdx
@@ -131,6 +131,15 @@ export default function Button () {
     dataPrefetch: true
   }),
 ```
+
+4. 消费者的 ModuleFederationPlugin 配置处设置 `dataPrefetch: true`
+```ts
+  new ModuleFederationPlugin({
+    // ...
+    dataPrefetch: true
+  }),
+```
+
 这样就完成了接口预请求，在 `Button` 被消费者使用后会提前将接口请求发送出去（加载 js 资源时就会发出，正常项目需要等到组件渲染时），
 在上面的例子中 `Button` 首先会渲染 `loading...`， 然后在 2s 后展示数据
 点击`重新发送带参数的请求`可以重新触发请求并且添加参数，用于更新组件
diff --git a/packages/data-prefetch/package.json b/packages/data-prefetch/package.json
@@ -6,8 +6,6 @@
   "homepage": "https://github.com/module-federation/core",
   "license": "MIT",
   "scripts": {
-    "dev": "cross-env WATCH=true tsup",
-    "build": "rm -rf dist && tsup",
     "test": "jest"
   },
   "publishConfig": {
@@ -38,11 +36,6 @@
       "import": "./dist/universal.esm.js",
       "require": "./dist/universal.cjs.js",
       "types": "./dist/universal.cjs.d.ts"
-    },
-    "./shared": {
-      "import": "./dist/shared.esm.js",
-      "require": "./dist/shared.cjs.js",
-      "types": "./dist/shared/.cjs.d.ts"
     }
   },
   "typesVersions": {
@@ -59,9 +52,6 @@
       "universal": [
         "./dist/universal.cjs.d.ts"
       ],
-      "shared": [
-        "./dist/shared.cjs.d.ts"
-      ],
       "babel-plugin": [
         "./dist/babel.cjs.d.ts"
       ]
@@ -79,7 +69,6 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^17.0.45",
     "@types/react": "~18.0.38",
-    "esbuild-plugin-replace": "^1.4.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "minimist": "^1.2.8",
@@ -88,7 +77,6 @@
     "react-router": "^6.21.3",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "29.0.1",
-    "tsup": "6.2.0",
     "webpack": "5.75.0"
   },
   "dependencies": {
diff --git a/packages/data-prefetch/rollup.config.js b/packages/data-prefetch/rollup.config.js
@@ -18,7 +18,6 @@ module.exports = (rollupConfig, _projectOptions) => {
     babel: 'packages/data-prefetch/src/cli/babel.ts',
     universal: 'packages/data-prefetch/src/universal/index.ts',
     plugin: 'packages/data-prefetch/src/plugin.ts',
-    shared: 'packages/data-prefetch/src/shared/index.ts',
   };
 
   if (Array.isArray(rollupConfig.output)) {
diff --git a/packages/data-prefetch/src/cli/index.ts b/packages/data-prefetch/src/cli/index.ts
@@ -12,6 +12,7 @@ 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';
+import { SHARED_STRATEGY } from '../constant';
 
 const { RuntimeGlobals, Template } = require(
   normalizeWebpackPath('webpack'),
@@ -48,12 +49,14 @@ export class PrefetchPlugin implements WebpackPluginInstance {
     }
 
     const runtimePath = path.resolve(__dirname, './plugin.esm.js');
-    const sharedPath = path.resolve(__dirname, './shared.esm.js');
     if (!this.options.runtimePlugins?.includes(runtimePath)) {
       this.options.runtimePlugins!.push(runtimePath);
     }
-    if (!this.options.runtimePlugins?.includes(sharedPath)) {
-      this.options.runtimePlugins!.push(sharedPath);
+    if (this.options.shareStrategy !== SHARED_STRATEGY) {
+      this.options.shareStrategy = SHARED_STRATEGY;
+      console.warn(
+        `[Module Federation Data Prefetch]: Your shared strategy is set to '${SHARED_STRATEGY}', this is a necessary condition for data prefetch`,
+      );
     }
 
     const encodedName = encodeName(name as string);
diff --git a/packages/data-prefetch/src/constant.ts b/packages/data-prefetch/src/constant.ts
@@ -0,0 +1 @@
+export const SHARED_STRATEGY = 'loaded-first';
diff --git a/packages/data-prefetch/src/plugin.ts b/packages/data-prefetch/src/plugin.ts
@@ -4,6 +4,7 @@ import { ModuleInfo, getResourceUrl } from '@module-federation/sdk';
 import { getSignalFromManifest } from './common/runtime-utils';
 import { MFDataPrefetch } from './prefetch';
 import logger from './logger';
+import { SHARED_STRATEGY } from './constant';
 
 interface Loading {
   id: string;
@@ -15,8 +16,7 @@ interface Loading {
   >;
 }
 const loadingArray: Array<Loading> = [];
-const strategy = 'loaded-first';
-let sharedFlag = strategy;
+let sharedFlag = SHARED_STRATEGY;
 // eslint-disable-next-line max-lines-per-function
 export const prefetchPlugin = (): FederationRuntimePlugin => ({
   name: 'data-prefetch-runtime-plugin',
@@ -35,7 +35,7 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
     if (!signal) {
       return options;
     }
-    if (sharedFlag !== strategy) {
+    if (sharedFlag !== SHARED_STRATEGY) {
       throw new Error(
         `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`,
       );
@@ -109,7 +109,7 @@ export const prefetchPlugin = (): FederationRuntimePlugin => ({
       return options;
     }
 
-    if (sharedFlag !== strategy) {
+    if (sharedFlag !== SHARED_STRATEGY) {
       throw new Error(
         `[Module Federation Data Prefetch]: If you want to use data prefetch, the shared strategy must be 'loaded-first'`,
       );
diff --git a/packages/data-prefetch/src/shared/index.ts b/packages/data-prefetch/src/shared/index.ts
diff --git a/packages/data-prefetch/tsup.config.ts b/packages/data-prefetch/tsup.config.ts
diff --git a/packages/enhanced/src/lib/container/ContainerEntryDependency.ts b/packages/enhanced/src/lib/container/ContainerEntryDependency.ts
@@ -22,27 +22,31 @@ class ContainerEntryDependency extends Dependency {
   public injectRuntimeEntry: string;
   /** Additional experimental options for container plugin customization */
   public experiments: containerPlugin.ContainerPluginOptions['experiments'];
+  public dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'];
 
   /**
    * @param {string} name entry name
    * @param {[string, ExposeOptions][]} exposes list of exposed modules
    * @param {string} shareScope name of the share scope
    * @param {string[]} injectRuntimeEntry the path of injectRuntime file.
    * @param {containerPlugin.ContainerPluginOptions['experiments']} experiments additional experiments options
+   * @param {containerPlugin.ContainerPluginOptions['dataPrefetch']} dataPrefetch whether enable dataPrefetch
    */
   constructor(
     name: string,
     exposes: [string, ExposeOptions][],
     shareScope: string,
     injectRuntimeEntry: string,
     experiments: containerPlugin.ContainerPluginOptions['experiments'],
+    dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'],
   ) {
     super();
     this.name = name;
     this.exposes = exposes;
     this.shareScope = shareScope;
     this.injectRuntimeEntry = injectRuntimeEntry;
     this.experiments = experiments;
+    this.dataPrefetch = dataPrefetch;
   }
 
   /**
diff --git a/packages/enhanced/src/lib/container/ContainerEntryModule.ts b/packages/enhanced/src/lib/container/ContainerEntryModule.ts
@@ -59,27 +59,31 @@ class ContainerEntryModule extends Module {
   private _shareScope: string;
   private _injectRuntimeEntry: string;
   private _experiments: containerPlugin.ContainerPluginOptions['experiments'];
+  private _dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'];
 
   /**
    * @param {string} name container entry name
    * @param {[string, ExposeOptions][]} exposes list of exposed modules
    * @param {string} shareScope name of the share scope
    * @param {string} injectRuntimeEntry the path of injectRuntime file.
    * @param {containerPlugin.ContainerPluginOptions['experiments']} experiments additional experiments options
+   * @param {containerPlugin.ContainerPluginOptions['dataPrefetch']} dataPrefetch whether enable dataPrefetch
    */
   constructor(
     name: string,
     exposes: [string, ExposeOptions][],
     shareScope: string,
     injectRuntimeEntry: string,
     experiments: containerPlugin.ContainerPluginOptions['experiments'],
+    dataPrefetch: containerPlugin.ContainerPluginOptions['dataPrefetch'],
   ) {
     super(JAVASCRIPT_MODULE_TYPE_DYNAMIC, null);
     this._name = name;
     this._exposes = exposes;
     this._shareScope = shareScope;
     this._injectRuntimeEntry = injectRuntimeEntry;
     this._experiments = experiments;
+    this._dataPrefetch = dataPrefetch;
   }
 
   /**
@@ -94,6 +98,7 @@ class ContainerEntryModule extends Module {
       read(),
       read(),
       read(),
+      read(),
     );
     obj.deserialize(context);
     return obj;
@@ -111,7 +116,7 @@ class ContainerEntryModule extends Module {
   override identifier(): string {
     return `container entry (${this._shareScope}) ${JSON.stringify(
       this._exposes,
-    )} ${this._injectRuntimeEntry} ${JSON.stringify(this._experiments)}`;
+    )} ${this._injectRuntimeEntry} ${JSON.stringify(this._experiments)} ${JSON.stringify(this._dataPrefetch)}`;
   }
   /**
    * @param {RequestShortener} requestShortener the request shortener
@@ -310,10 +315,9 @@ class ContainerEntryModule extends Module {
           '})',
         ],
       )};`,
-      PrefetchPlugin.setRemoteIdentifier(),
+      this._dataPrefetch ? PrefetchPlugin.setRemoteIdentifier() : '',
       `${initRuntimeModuleGetter}`,
-      PrefetchPlugin.removeRemoteIdentifier(),
-      '',
+      this._dataPrefetch ? PrefetchPlugin.removeRemoteIdentifier() : '',
       '// This exports getters to disallow modifications',
       `${RuntimeGlobals.definePropertyGetters}(exports, {`,
       Template.indent([
@@ -353,6 +357,7 @@ class ContainerEntryModule extends Module {
     write(this._shareScope);
     write(this._injectRuntimeEntry);
     write(this._experiments);
+    write(this._dataPrefetch);
     super.serialize(context);
   }
 }
diff --git a/packages/enhanced/src/lib/container/ContainerEntryModuleFactory.ts b/packages/enhanced/src/lib/container/ContainerEntryModuleFactory.ts
@@ -39,6 +39,7 @@ export default class ContainerEntryModuleFactory extends ModuleFactory {
         dep.shareScope,
         dep.injectRuntimeEntry,
         dep.experiments,
+        dep.dataPrefetch,
       ),
     });
   }
diff --git a/packages/enhanced/src/lib/container/ContainerPlugin.ts b/packages/enhanced/src/lib/container/ContainerPlugin.ts
@@ -69,6 +69,7 @@ class ContainerPlugin {
       ),
       runtimePlugins: options.runtimePlugins,
       experiments: options.experiments,
+      dataPrefetch: options.dataPrefetch,
     };
   }
 
@@ -205,6 +206,7 @@ class ContainerPlugin {
           shareScope,
           federationRuntimePluginInstance.entryFilePath,
           this._options.experiments,
+          this._options.dataPrefetch,
         );
         dep.loc = { name };
 
@@ -283,6 +285,7 @@ class ContainerPlugin {
           shareScope,
           federationRuntimePluginInstance.entryFilePath,
           this._options.experiments,
+          this._options.dataPrefetch,
         );
 
         dep.loc = { name };
diff --git a/packages/enhanced/src/lib/container/ModuleFederationPlugin.ts b/packages/enhanced/src/lib/container/ModuleFederationPlugin.ts
diff --git a/packages/sdk/src/types/plugins/ContainerPlugin.ts b/packages/sdk/src/types/plugins/ContainerPlugin.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@module-federation/data-prefetch': patch
 +---
++
 +fix(data-prefetch): set sharedStrategy in build options instead of using runtime plugin