Merge pull request #93 from kunai-consulting/module-preload

module-preload
kunai-consulting · Jan 10, 2025 · c8fef39 · c8fef39
2 parents 3686b29 + ceae21c
commit c8fef39
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 2 deletions.
diff --git a/apps/docs/src/components/module-preload.tsx b/apps/docs/src/components/module-preload.tsx
@@ -0,0 +1,72 @@
+import { component$, sync$, useOnWindow } from '@builder.io/qwik';
+
+export const ModulePreload = component$(() => {
+  useOnWindow(
+    'load',
+    sync$(async () => {
+      // for safari support
+      if (!window.requestIdleCallback) {
+        window.requestIdleCallback = function (
+          callback: IdleRequestCallback,
+          options?: IdleRequestOptions,
+        ): number {
+          const opts = options || {};
+          const relaxation = 1;
+          const timeout = opts.timeout || relaxation;
+          const start = performance.now();
+          return setTimeout(function () {
+            callback({
+              get didTimeout() {
+                return opts.timeout
+                  ? false
+                  : performance.now() - start - relaxation > timeout;
+              },
+              timeRemaining: function () {
+                return Math.max(0, relaxation + (performance.now() - start));
+              },
+            });
+          }, relaxation) as unknown as number;
+        };
+      }
+
+      const startPreloading = async () => {
+        const qChunks = new Set<string>();
+
+        // Check prefetch bundles
+        const prefetchScript = document.querySelector('script[q\\:type="prefetch-bundles"]');
+        if (prefetchScript?.textContent) {
+          const content = prefetchScript.textContent;
+          const match = content.match(/\["prefetch","\/build\/","(.*?)"\]/);
+          if (match && match[1]) {
+            match[1].split('","').forEach((chunk) => {
+              if (chunk.startsWith('q-')) {
+                qChunks.add(chunk);
+              }
+            });
+          }
+        }
+
+        // Check qwik/json script
+        const qwikJson = document.querySelector('script[type="qwik/json"]');
+        if (qwikJson?.textContent) {
+          const matches = qwikJson.textContent.match(/q-[A-Za-z0-9_-]+\.js/g);
+          if (matches) {
+            matches.forEach(chunk => qChunks.add(chunk));
+          }
+        }
+
+        qChunks.forEach((chunk) => {
+          const link = document.createElement('link');
+          link.rel = 'modulepreload';
+          link.href = `/build/${chunk}`;
+          link.fetchPriority = 'low';
+          document.head.appendChild(link);
+        });
+      };
+
+      await requestIdleCallback(await startPreloading);
+    }),
+  );
+
+  return <></>;
+});
diff --git a/apps/docs/src/root.tsx b/apps/docs/src/root.tsx
@@ -2,12 +2,12 @@ import { component$ } from "@builder.io/qwik";
 import {
   QwikCityProvider,
   RouterOutlet,
-  ServiceWorkerRegister
 } from "@builder.io/qwik-city";
 import { isDev } from "@builder.io/qwik/build";
 import { RouterHead } from "./docs-widgets/router-head/router-head";
 
 import "./global.css";
+import { ModulePreload } from "./components/module-preload";
 
 export default component$(() => {
   /**
@@ -28,7 +28,7 @@ export default component$(() => {
       </head>
       <body lang="en">
         <RouterOutlet />
-        <ServiceWorkerRegister />
+        <ModulePreload />
         <script
           dangerouslySetInnerHTML={`
             window.addEventListener('initPagefind', async () => {