perf(preloader): init asap

this doesn't seem to interfere with LCP because it's small and async, and it allows listening to qwikloader events sooner.

Author: wmertens

packages/qwik/src/server/preload-impl.ts

@@ -68,28 +68,12 @@ export const includePreloader = (
         `document.head.appendChild(e)` +
         `});`
       : '';
-    const opts: string[] = [];
-    if (debug) {
-      opts.push('d:1');
-    }
-    if (maxIdlePreloads) {
-      opts.push(`P:${maxIdlePreloads}`);
-    }
-    if (preloadProbability) {
-      opts.push(`Q:${preloadProbability}`);
-    }
-    const optsStr = opts.length ? `,{${opts.join(',')}}` : '';
     // We are super careful not to interfere with the page loading.
     const script =
-      // First we wait for the onload event
-      `let b=fetch("${base}q-bundle-graph-${manifestHash}.json");` +
       insertLinks +
+      // First we wait for the onload event
       `window.addEventListener('load',f=>{` +
-      `f=_=>{` +
-      `import("${base}${preloadChunk}").then(({l,p})=>{` +
-      `l(${JSON.stringify(base)},b${optsStr});` +
-      `p(${JSON.stringify(referencedBundles)});` +
-      `})};` +
+      `f=_=>import("${base}${preloadChunk}").then(({p})=>p(${JSON.stringify(referencedBundles)}));` +
       // then we ask for idle callback
       `try{requestIdleCallback(f,{timeout:2000})}` +
       // some browsers don't support requestIdleCallback
@@ -124,8 +108,9 @@ export const includePreloader = (
 export const preloaderPre = (
   base: string,
   resolvedManifest: ResolvedManifest | undefined,
-  options: PreloaderOptions | boolean | undefined,
-  beforeContent: JSXNode<string>[]
+  options: PreloaderOptions | false | undefined,
+  beforeContent: JSXNode<string>[],
+  nonce?: string
 ) => {
   const preloadChunk = resolvedManifest?.manifest?.preloader;
   if (preloadChunk && options !== false) {
@@ -140,16 +125,48 @@ export const preloaderPre = (
           : undefined;
       initPreloader(bundleGraph, preloaderOpts);
     }
-    const core = resolvedManifest?.manifest.core;
+
+    const opts: string[] = [];
+    if (options?.debug) {
+      opts.push('d:1');
+    }
+    if (options?.maxIdlePreloads) {
+      opts.push(`P:${options.maxIdlePreloads}`);
+    }
+    if (options?.preloadProbability) {
+      opts.push(`Q:${options.preloadProbability}`);
+    }
+    const optsStr = opts.length ? `,{${opts.join(',')}}` : '';
+
+    const hash = resolvedManifest?.manifest.manifestHash;
+
+    const script =
+      `let b=fetch("${base}q-bundle-graph-${hash}.json");` +
+      `import("${base}${preloadChunk}").then(({l})=>` +
+      `l(${JSON.stringify(base)},b${optsStr})` +
+      `);`;
+
     beforeContent.push(
+      /**
+       * We add modulepreloads even when the script is at the top because they already fire during
+       * html download
+       */
       jsx('link', { rel: 'modulepreload', href: `${base}${preloadChunk}` }),
       jsx('link', {
         rel: 'preload',
         href: `${base}q-bundle-graph-${resolvedManifest?.manifest.manifestHash}.json`,
         as: 'fetch',
         crossorigin: 'anonymous',
+      }),
+      jsx('script', {
+        type: 'module',
+        async: true,
+        dangerouslySetInnerHTML: script,
+        nonce,
       })
     );
+
+    const core = resolvedManifest?.manifest.core;
     if (core) {
       beforeContent.push(jsx('link', { rel: 'modulepreload', href: `${base}${core}` }));
     }

packages/qwik/src/server/render.ts

@@ -152,7 +152,7 @@ export async function renderToStream(
       })
     );
   }
-  preloaderPre(buildBase, resolvedManifest, opts.preloader, beforeContent);
+  preloaderPre(buildBase, resolvedManifest, opts.preloader, beforeContent, opts.serverData?.nonce);
 
   const renderTimer = createTimer();
   const renderSymbols: string[] = [];

packages/qwik/src/server/types.ts

@@ -157,7 +157,7 @@ export interface RenderOptions extends SerializeDocumentOptions {
    */
   qwikLoader?: QwikLoaderOptions;
 
-  preloader?: PreloaderOptions | boolean;
+  preloader?: PreloaderOptions | false;
 
   /** @deprecated Use `preloader` instead */
   qwikPrefetchServiceWorker?: QwikPrefetchServiceWorkerOptions;