Merge pull request #7604 from QwikDev/eager-preloader

- adds the preloader, core, and the bundlegraph as preloads at the top of the page
- adds SSR modulepreload links immediately after body completes, so that those preloads don't interfere with page loading, but still before document ready (what it was before)

These changes don't seem to interfere with LCP, and they decrease delays.

Author: wmertens

packages/docs/src/routes/api/qwik-optimizer/api.json

@@ -434,7 +434,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundleGraph?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikBundleGraph](#qwikbundlegraph)\n\n\n</td><td>\n\n_(Optional)_ All bundles in a compact graph format with probabilities\n\n\n</td></tr>\n<tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { type: [EntryStrategy](#entrystrategy)<!-- -->\\['type'\\]; }; }\n\n\n</td><td>\n\n_(Optional)_ The options used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_ The platform used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The preloader bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe version of the manifest\n\n\n</td></tr>\n</tbody></table>",
+      "content": "The metadata of the build. One of its uses is storing where QRL symbols are located.\n\n\n```typescript\nexport interface QwikManifest \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[bundleGraph?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikBundleGraph](#qwikbundlegraph)\n\n\n</td><td>\n\n_(Optional)_ All bundles in a compact graph format with probabilities\n\n\n</td></tr>\n<tr><td>\n\n[bundles](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[fileName: string\\]: [QwikBundle](#qwikbundle)<!-- -->; }\n\n\n</td><td>\n\nAll code bundles, used to know the import graph\n\n\n</td></tr>\n<tr><td>\n\n[core?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The Qwik core bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[injections?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[GlobalInjections](#globalinjections)<!-- -->\\[\\]\n\n\n</td><td>\n\n_(Optional)_ CSS etc to inject in the document head\n\n\n</td></tr>\n<tr><td>\n\n[manifestHash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nContent hash of the manifest, if this changes, the code changed\n\n\n</td></tr>\n<tr><td>\n\n[mapping](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: string; }\n\n\n</td><td>\n\nWhere QRLs are located\n\n\n</td></tr>\n<tr><td>\n\n[options?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ target?: string; buildMode?: string; entryStrategy?: { type: [EntryStrategy](#entrystrategy)<!-- -->\\['type'\\]; }; }\n\n\n</td><td>\n\n_(Optional)_ The options used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[platform?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[name: string\\]: string; }\n\n\n</td><td>\n\n_(Optional)_ The platform used to build the manifest\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ The preloader bundle fileName\n\n\n</td></tr>\n<tr><td>\n\n[symbols](#)\n\n\n</td><td>\n\n\n</td><td>\n\n{ \\[symbolName: string\\]: [QwikSymbol](#qwiksymbol)<!-- -->; }\n\n\n</td><td>\n\nQRL symbols\n\n\n</td></tr>\n<tr><td>\n\n[version](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\nThe version of the manifest\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwikmanifest.md"
     },

packages/docs/src/routes/api/qwik-optimizer/index.mdx

@@ -1433,6 +1433,21 @@ All code bundles, used to know the import graph
 </td></tr>
 <tr><td>
 
+[core?](#)
+
+</td><td>
+
+</td><td>
+
+string
+
+</td><td>
+
+_(Optional)_ The Qwik core bundle fileName
+
+</td></tr>
+<tr><td>
+
 [injections?](#)
 
 </td><td>

packages/qwik/src/optimizer/src/manifest.ts

@@ -473,6 +473,8 @@ export function generateManifestFromBundles(
       bundle.origins = modulePaths;
       if (modulePaths.some((m) => m.endsWith(QWIK_PRELOADER_REAL_ID))) {
         manifest.preloader = bundleFileName;
+      } else if (modulePaths.some((m) => /[/\\]qwik[/\\]dist[/\\]core\.[^/]*js$/.test(m))) {
+        manifest.core = bundleFileName;
       }
     }
 

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -868,6 +868,7 @@ export const isDev = ${JSON.stringify(isDev)};
         bundleGraph: manifest.bundleGraph,
         mapping: manifest.mapping,
         preloader: manifest.preloader,
+        core: manifest.core,
       };
     }
     return `// @qwik-client-manifest

packages/qwik/src/optimizer/src/qwik.optimizer.api.md

@@ -185,6 +185,7 @@ export interface QwikManifest {
     bundles: {
         [fileName: string]: QwikBundle;
     };
+    core?: string;
     injections?: GlobalInjections[];
     manifestHash: string;
     mapping: {

packages/qwik/src/optimizer/src/types.ts

@@ -227,6 +227,8 @@ export interface QwikManifest {
   bundleGraph?: QwikBundleGraph;
   /** The preloader bundle fileName */
   preloader?: string;
+  /** The Qwik core bundle fileName */
+  core?: string;
   /** CSS etc to inject in the document head */
   injections?: GlobalInjections[];
   /** The version of the manifest */
@@ -247,7 +249,7 @@ export interface QwikManifest {
  */
 export type ServerQwikManifest = Pick<
   QwikManifest,
-  'manifestHash' | 'injections' | 'bundleGraph' | 'mapping' | 'preloader'
+  'manifestHash' | 'injections' | 'bundleGraph' | 'mapping' | 'preloader' | 'core'
 >;
 
 /**

packages/qwik/src/server/prefetch-strategy.ts

@@ -72,5 +72,8 @@ export const expandBundles = (names: string[], resolvedManifest?: ResolvedManife
     probability *= 0.95;
   }
 
-  return getQueue();
+  return getQueue().filter(
+    (name) =>
+      name !== resolvedManifest?.manifest.preloader && name !== resolvedManifest?.manifest.core
+  );
 };

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

@@ -63,7 +63,7 @@ export function includePreloader(
         `e=document.createElement('link');` +
         `e.rel='modulepreload';` +
         `e.href=${JSON.stringify(base)}+l;` +
-        `document.body.appendChild(e)` +
+        `document.head.appendChild(e)` +
         `});`
       : '';
     const opts: string[] = [];
@@ -80,9 +80,10 @@ export function includePreloader(
     // 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 +
       `window.addEventListener('load',f=>{` +
-      `f=b=>{${insertLinks}` +
-      `b=fetch("${base}q-bundle-graph-${manifestHash}.json");` +
+      `f=_=>{` +
       `import("${base}${preloadChunk}").then(({l,p})=>{` +
       `l(${JSON.stringify(base)},b${optsStr});` +
       `p(${JSON.stringify(referencedBundles)});` +

packages/qwik/src/server/render.ts

@@ -165,6 +165,22 @@ export async function renderToStream(
       })
     );
   }
+  const preloadChunk = resolvedManifest?.manifest?.preloader;
+  if (preloadChunk && opts.preloader !== false) {
+    const core = resolvedManifest?.manifest.core;
+    beforeContent.push(
+      jsx('link', { rel: 'modulepreload', href: `${buildBase}${preloadChunk}` }),
+      jsx('link', {
+        rel: 'preload',
+        href: `${buildBase}q-bundle-graph-${resolvedManifest?.manifest.manifestHash}.json`,
+        as: 'fetch',
+        crossorigin: 'anonymous',
+      })
+    );
+    if (core) {
+      beforeContent.push(jsx('link', { rel: 'modulepreload', href: `${buildBase}${core}` }));
+    }
+  }
 
   const renderTimer = createTimer();
   const renderSymbols: string[] = [];

starters/apps/preloader-test/src/entry.ssr.tsx

@@ -18,13 +18,9 @@ import Root from "./root";
 
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
-    prefetchStrategy: {
-      implementation: {
-        debug: true,
-        minProbability: 0.5,
-        maxSimultaneousPreloads: 10,
-        minPreloadProbability: 0.25,
-      },
+    preloader: {
+      debug: true,
+      ssrPreloads: 10,
     },
     ...opts,
     // Use container attributes to set attributes on the html tag.