perf(preloader): preload preloader sooner

also add core as a preload

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.