fix(runtime): preload filter loaded resources

Author: 2heal1

packages/modernjs/src/runtime/createRemoteSSRComponent.tsx

@@ -131,37 +131,40 @@ export function collectSSRAssets(options: IProps) {
   }
   const { module: targetModule, publicPath, remoteEntry } = moduleAndPublicPath;
   if (injectLink) {
-    [...targetModule.assets.css.async].sort().forEach((file, index) => {
-      links.push(
-        <link
+    [...targetModule.assets.css.sync, ...targetModule.assets.css.async]
+      .sort()
+      .forEach((file, index) => {
+        links.push(
+          <link
+            key={`${file.split('.')[0]}_${index}`}
+            href={`${publicPath}${file}`}
+            rel="stylesheet"
+            type="text/css"
+          />,
+        );
+      });
+  }
+
+  if (injectScript) {
+    scripts.push(
+      <script
+        async={true}
+        key={remoteEntry.split('.')[0]}
+        src={`${publicPath}${remoteEntry}`}
+        crossOrigin="anonymous"
+      />,
+    );
+    [...targetModule.assets.js.sync].sort().forEach((file, index) => {
+      scripts.push(
+        <script
           key={`${file.split('.')[0]}_${index}`}
-          href={`${publicPath}${file}`}
-          rel="stylesheet"
-          type="text/css"
+          async={true}
+          src={`${publicPath}${file}`}
+          crossOrigin="anonymous"
         />,
       );
     });
   }
-  scripts.push(
-    <script
-      async={true}
-      key={remoteEntry.split('.')[0]}
-      src={`${publicPath}${remoteEntry}`}
-      crossOrigin="anonymous"
-    />,
-  );
-  // if (injectScript) {
-  //   [...targetModule.assets.js.sync].sort().forEach((file, index) => {
-  //     scripts.push(
-  //       <script
-  //         key={`${file.split('.')[0]}_${index}`}
-  //         async={true}
-  //         src={`${publicPath}${file}`}
-  //         crossOrigin="anonymous"
-  //       />,
-  //     );
-  //   });
-  // }
 
   return [...scripts, ...links];
 }

packages/runtime-core/src/plugins/generate-preload-assets.ts

@@ -4,6 +4,7 @@ import {
   ProviderModuleInfo,
   isManifestProvider,
   getResourceUrl,
+  isBrowserEnv,
 } from '@module-federation/sdk';
 import {
   EntryAssets,
@@ -101,6 +102,14 @@ function traverseModuleInfo(
   }
 }
 
+const filterExistedAssets = (type: 'link' | 'script', url: string) => {
+  return Boolean(
+    document.querySelector(
+      `${type}[${type === 'link' ? 'href' : 'src'}="${url}"]`,
+    ),
+  );
+};
+
 // eslint-disable-next-line max-lines-per-function
 export function generatePreloadAssets(
   origin: FederationHost,
@@ -290,16 +299,20 @@ export function generatePreloadAssets(
   }
 
   const needPreloadJsAssets = jsAssets.filter(
-    (asset) => !loadedSharedJsAssets.has(asset),
+    (asset) =>
+      !loadedSharedJsAssets.has(asset) && filterExistedAssets('script', asset),
   );
   const needPreloadCssAssets = cssAssets.filter(
-    (asset) => !loadedSharedCssAssets.has(asset),
+    (asset) =>
+      !loadedSharedCssAssets.has(asset) && filterExistedAssets('link', asset),
   );
 
   return {
     cssAssets: needPreloadCssAssets,
     jsAssetsWithoutEntry: needPreloadJsAssets,
-    entryAssets,
+    entryAssets: entryAssets.filter((entry) =>
+      filterExistedAssets('script', entry.url),
+    ),
   };
 }
 
@@ -316,6 +329,13 @@ export const generatePreloadAssetsPlugin: () => FederationRuntimePlugin =
           globalSnapshot,
           remoteSnapshot,
         } = args;
+        if (!isBrowserEnv()) {
+          return {
+            cssAssets: [],
+            jsAssetsWithoutEntry: [],
+            entryAssets: [],
+          };
+        }
 
         if (isRemoteInfoWithEntry(remote) && isPureRemoteEntry(remote)) {
           return {