fix: fixed preload resource reuse issues and devtool hmr shared (#2580)

Author: zhoushaw

.changeset/perfect-camels-type.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/devtools': patch
+---
+
+fix: devtools Adjustments hmr changes the behavior of shared to make changes more stable

.changeset/wet-geckos-tan.md

@@ -0,0 +1,7 @@
+---
+'runtime-remote1': patch
+'@module-federation/runtime': patch
+'@module-federation/sdk': patch
+---
+
+fix: In load remote, link preload is not used to preload resources, preventing resource reloading

.github/workflows/build-and-test.yml

@@ -44,7 +44,7 @@ jobs:
         run: npx nx affected -t lint --parallel=7 --exclude='*,!tag:type:pkg'
 
       - name: Run Affected Test
-        run: npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg'
+        run: npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg' --skip-cache
 
       # - name: E2E Test for Next.js Dev
       #   run: |

apps/runtime-demo/3006-runtime-remote/src/components/WebpackPng.tsx

@@ -1,4 +1,5 @@
 import png from '../../public/webpack.png';
+import './a.css';
 
 export default function WebpackPng() {
   return <img className="remote1-webpack-png" src={png} alt="webpack png" />;

apps/runtime-demo/3006-runtime-remote/src/components/a.css

@@ -0,0 +1,3 @@
+span {
+  color: red;
+}

packages/chrome-devtools/src/utils/chrome/fast-refresh.ts

@@ -11,8 +11,8 @@ import { __FEDERATION_DEVTOOLS__ } from '../../template';
 const fastRefreshPlugin = (): FederationRuntimePlugin => {
   return {
     name: 'mf-fast-refresh-plugin',
-    // @ts-expect-error
-    beforeInit({ origin, userOptions, options, shareInfo }) {
+    beforeInit({ userOptions, ...args }) {
+      const shareInfo = userOptions.shared;
       let enableFastRefresh: boolean;
       let devtoolsMessage;
 
@@ -26,7 +26,7 @@ const fastRefreshPlugin = (): FederationRuntimePlugin => {
         }
       }
 
-      if (isObject(shareInfo)) {
+      if (shareInfo && isObject(shareInfo)) {
         let orderResolve: (value?: unknown) => void;
         const orderPromise = new Promise((resolve) => {
           orderResolve = resolve;
@@ -83,16 +83,13 @@ const fastRefreshPlugin = (): FederationRuntimePlugin => {
         });
 
         return {
-          origin,
           userOptions,
-          options,
-          shareInfo,
+          ...args,
         };
       } else {
         return {
-          origin,
           userOptions,
-          options,
+          ...args,
         };
       }
     },

packages/runtime/__tests__/__snapshots__/preload-remote.spec.ts.snap

@@ -4,28 +4,28 @@ exports[`preload-remote inBrowser > 1 preload with default config 1`] = `
 {
   "links": [
     {
-      "href": "http://localhost:1111/resources/preload/preload-resource/button.sync.js",
+      "href": "http://localhost:1111/resources/preload/preload-resource/button.sync.css",
       "rel": "preload",
-      "type": "script",
+      "type": "style",
     },
     {
-      "href": "http://localhost:1111/resources/preload/preload-resource/sub1-button/button.sync.js",
+      "href": "http://localhost:1111/resources/preload/preload-resource/button.sync.js",
       "rel": "preload",
       "type": "script",
     },
     {
-      "href": "http://localhost:1111/resources/preload/preload-resource/button.sync.css",
+      "href": "http://localhost:1111/resources/preload/preload-resource/sub1-button/button.sync.js",
       "rel": "preload",
-      "type": "style",
+      "type": "script",
     },
   ],
   "scripts": [
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/federation-remote-entry.js",
     },
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/sub1-button/federation-remote-entry.js",
     },
   ],
@@ -35,6 +35,16 @@ exports[`preload-remote inBrowser > 1 preload with default config 1`] = `
 exports[`preload-remote inBrowser > 2 preload with all config  1`] = `
 {
   "links": [
+    {
+      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.async.css",
+      "rel": "preload",
+      "type": "style",
+    },
+    {
+      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.sync.css",
+      "rel": "preload",
+      "type": "style",
+    },
     {
       "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.async.js",
       "rel": "preload",
@@ -65,24 +75,14 @@ exports[`preload-remote inBrowser > 2 preload with all config  1`] = `
       "rel": "preload",
       "type": "script",
     },
-    {
-      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.async.css",
-      "rel": "preload",
-      "type": "style",
-    },
-    {
-      "href": "http://localhost:1111/resources/preload/preload-resource/sub2/button.sync.css",
-      "rel": "preload",
-      "type": "style",
-    },
   ],
   "scripts": [
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/sub2/federation-remote-entry.js",
     },
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/sub2-button/federation-remote-entry.js",
     },
   ],
@@ -100,7 +100,7 @@ exports[`preload-remote inBrowser > 3 preload with expose config  1`] = `
   ],
   "scripts": [
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/sub3/federation-remote-entry.js",
     },
   ],
@@ -118,7 +118,7 @@ exports[`preload-remote inBrowser > 3 preload with expose config  2`] = `
   ],
   "scripts": [
     {
-      "crossorigin": "",
+      "crossorigin": "anonymous",
       "src": "http://localhost:1111/resources/preload/preload-resource/sub3/federation-remote-entry.js",
     },
   ],

packages/runtime/src/plugins/snapshot/index.ts

@@ -67,7 +67,7 @@ export function snapshotPlugin(): FederationRuntimePlugin {
           );
 
         if (assets) {
-          preloadAssets(remoteInfo, origin, assets);
+          preloadAssets(remoteInfo, origin, assets, false);
         }
 
         return {

packages/runtime/src/utils/preload.ts

@@ -1,4 +1,4 @@
-import { createLink } from '@module-federation/sdk';
+import { createLink, createScript } from '@module-federation/sdk';
 import {
   PreloadAssets,
   PreloadConfig,
@@ -69,6 +69,8 @@ export function preloadAssets(
   remoteInfo: RemoteInfo,
   host: FederationHost,
   assets: PreloadAssets,
+  // It is used to distinguish preload from load remote parallel loading
+  useLinkPreload: boolean = true,
 ): void {
   const { cssAssets, jsAssetsWithoutEntry, entryAssets } = assets;
 
@@ -131,52 +133,96 @@ export function preloadAssets(
       }
     });
 
-    const fragment = document.createDocumentFragment();
-    cssAssets.forEach((cssUrl) => {
-      const { link: cssEl, needAttach } = createLink(
-        cssUrl,
-        () => {},
-        {
-          rel: 'preload',
-          as: 'style',
-        },
-        (url: string) => {
-          const res = host.loaderHook.lifecycle.createLink.emit({
-            url,
-          });
-          if (res instanceof HTMLLinkElement) {
-            return res;
-          }
-          return;
-        },
-      );
-
-      needAttach && fragment.appendChild(cssEl);
-    });
+    if (useLinkPreload) {
+      cssAssets.forEach((cssUrl) => {
+        const { link: cssEl, needAttach } = createLink({
+          url: cssUrl,
+          cb: () => {},
+          attrs: {
+            rel: 'preload',
+            as: 'style',
+            crossorigin: 'anonymous',
+          },
+          createLinkHook: (url: string) => {
+            const res = host.loaderHook.lifecycle.createLink.emit({
+              url,
+            });
+            if (res instanceof HTMLLinkElement) {
+              return res;
+            }
+            return;
+          },
+        });
 
-    jsAssetsWithoutEntry.forEach((jsUrl) => {
-      const { link: linkEl, needAttach } = createLink(
-        jsUrl,
-        () => {
-          // noop
-        },
-        {
-          rel: 'preload',
-          as: 'script',
-        },
-        (url: string) => {
-          const res = host.loaderHook.lifecycle.createLink.emit({
-            url,
-          });
-          if (res instanceof HTMLLinkElement) {
-            return res;
-          }
-          return;
-        },
-      );
-      needAttach && document.head.appendChild(linkEl);
-    });
+        needAttach && document.head.appendChild(cssEl);
+      });
+    } else {
+      cssAssets.forEach((cssUrl) => {
+        const { link: cssEl, needAttach } = createLink({
+          url: cssUrl,
+          cb: () => {},
+          attrs: {
+            rel: 'stylesheet',
+            type: 'text/css',
+          },
+          createLinkHook: (url: string) => {
+            const res = host.loaderHook.lifecycle.createLink.emit({
+              url,
+            });
+            if (res instanceof HTMLLinkElement) {
+              return res;
+            }
+            return;
+          },
+        });
+
+        needAttach && document.head.appendChild(cssEl);
+      });
+    }
 
-    document.head.appendChild(fragment);
+    if (useLinkPreload) {
+      jsAssetsWithoutEntry.forEach((jsUrl) => {
+        const { link: linkEl, needAttach } = createLink({
+          url: jsUrl,
+          cb: () => {},
+          attrs: {
+            rel: 'preload',
+            as: 'script',
+            crossorigin: 'anonymous',
+          },
+          createLinkHook: (url: string) => {
+            const res = host.loaderHook.lifecycle.createLink.emit({
+              url,
+            });
+            if (res instanceof HTMLLinkElement) {
+              return res;
+            }
+            return;
+          },
+        });
+        needAttach && document.head.appendChild(linkEl);
+      });
+    } else {
+      jsAssetsWithoutEntry.forEach((jsUrl) => {
+        const { script: scriptEl, needAttach } = createScript({
+          url: jsUrl,
+          cb: () => {},
+          attrs: {
+            crossorigin: 'anonymous',
+            fetchpriority: 'high',
+          },
+          createScriptHook: (url: string) => {
+            const res = host.loaderHook.lifecycle.createScript.emit({
+              url,
+            });
+            if (res instanceof HTMLScriptElement) {
+              return res;
+            }
+            return;
+          },
+        });
+        needAttach && document.head.appendChild(scriptEl);
+      });
+    }
   }
 }