Use module preload when possible

DustinBrett · Dec 6, 2024 · e0a7939 · e0a7939
1 parent ba09ed0
commit e0a7939
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/utils/functions.ts b/utils/functions.ts
@@ -868,6 +868,22 @@ const getPreloadedLinks = (): HTMLLinkElement[] => [
   ...document.querySelectorAll<HTMLLinkElement>("link[rel=preload]"),
 ];
 
+let HAS_MODULE_PRELOAD_SUPPORT = false;
+
+const supportsModulePreload = (): boolean => {
+  if (HAS_MODULE_PRELOAD_SUPPORT) return true;
+
+  try {
+    HAS_MODULE_PRELOAD_SUPPORT = Boolean(
+      document.createElement("link").relList?.supports?.("modulepreload")
+    );
+  } catch {
+    // Ignore failure to check for modulepreload support
+  }
+
+  return HAS_MODULE_PRELOAD_SUPPORT;
+};
+
 let HAS_WEBP_SUPPORT = false;
 
 export const supportsWebp = (): boolean => {
@@ -958,6 +974,11 @@ export const preloadLibs = (libs: string[] = []): void => {
       case ".html":
         link.rel = "prerender";
         break;
+      case ".js":
+        if (supportsModulePreload()) {
+          link.rel = "modulepreload";
+        }
+        break;
       case ".json":
       case ".wasm":
         link.as = "fetch";