perf(preload): refactor bundlegraph fetch

- use json again because overall it takes less time to parse
- don't preload so that the critical bundles have precedence
- don't exclude preloader from critical bundles

Author: wmertens

packages/docs/src/routes/docs/(qwikcity)/advanced/speculative-module-fetching/index.mdx

@@ -62,7 +62,7 @@ However, Qwik knows the module graph and controls QRL segment loading, we do kno
 
 The Qwik build process generates a `q-manifest.json` file. The `q-manifest.json` includes a detailed module graph of how bundles are associated and which symbols are within each bundle.
 
-This is then further used to generate the `build/q-bundle-graph-xyz.js` file, which is a compact representation of the module graph, including probabilities of which bundlers are more likely to be requested next given a certain bundle has loaded, and is loaded by Qwik to preload QRL segment loading.
+This is then further used to generate the `build/q-bundle-graph-xyz.json` file, which is a compact representation of the module graph, including probabilities of which bundlers are more likely to be requested next given a certain bundle has loaded, and is loaded by Qwik to preload QRL segment loading.
 
 Qwik-City also injects all routes with their dependencies into this bundlegraph file.
 

packages/qwik/src/core/preloader/bundle-graph.ts

@@ -73,7 +73,7 @@ export const getBundle = (name: string) => {
 /** Used in browser */
 export const loadBundleGraph = (
   basePath: string,
-  manifestHash: string,
+  serializedResponse?: ReturnType<typeof fetch>,
   opts?: {
     /** Enable logging */
     debug?: boolean;
@@ -99,10 +99,11 @@ export const loadBundleGraph = (
   }
   base = basePath;
 
-  if (manifestHash) {
-    import(/* @vite-ignore */ `${basePath}q-bundle-graph-${manifestHash}.js`)
-      .then((m) => {
-        graph = parseBundleGraph(m.B);
+  if (serializedResponse) {
+    serializedResponse
+      .then((r) => r.text())
+      .then((text) => {
+        graph = parseBundleGraph(JSON.parse(text));
         const toAdjust: [BundleImport, number][] = [];
         for (const [name, deps] of graph.entries()) {
           const bundle = getBundle(name)!;

packages/qwik/src/optimizer/src/plugins/bundle-graph.ts

@@ -64,11 +64,6 @@ export function convertManifestToBundleGraph(
     }
   }
 
-  // Remove the preloader, it will already be loaded and has no dependencies
-  if (manifest.preloader) {
-    delete graph[manifest.preloader];
-  }
-
   // Filter out external and non-segment dynamic imports
   for (const bundleName of Object.keys(graph)) {
     const bundle = graph[bundleName];

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

@@ -954,9 +954,9 @@ export const manifest = ${JSON.stringify(serverManifest)};\n`;
       fileName: optimizer.sys.path.join(
         useAssetsDir ? assetsDir : '',
         'build',
-        `q-bundle-graph-${manifest.manifestHash}.js`
+        `q-bundle-graph-${manifest.manifestHash}.json`
       ),
-      source: `export const B=${JSON.stringify(bundleGraph)}`,
+      source: JSON.stringify(bundleGraph),
     });
 
     manifest.bundleGraph = bundleGraph;

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

@@ -47,16 +47,7 @@ export function includePreloader(
     return jsx('link', linkProps as any);
   };
 
-  const preloadChunk = manifest?.manifest.preloader;
   const manifestHash = manifest?.manifest.manifestHash;
-  if (allowed && preloadChunk) {
-    allowed--;
-    nodes.push(makeLink(base, preloadChunk!));
-    if (allowed && manifestHash) {
-      allowed--;
-      nodes.push(makeLink(base, `q-bundle-graph-${manifestHash}.js`));
-    }
-  }
   if (allowed) {
     const expandedBundles = expandBundles(referencedBundles, manifest);
     // Keep the same as in expandBundles (but *10)
@@ -76,6 +67,8 @@ export function includePreloader(
       }
     }
   }
+
+  const preloadChunk = manifestHash && manifest?.manifest.preloader;
   if (preloadChunk) {
     const opts: string[] = [];
     if (debug) {
@@ -88,16 +81,21 @@ export function includePreloader(
       opts.push(`Q:${minPreloadProbability}`);
     }
     const optsStr = opts.length ? `,{${opts.join(',')}}` : '';
+    const script = `let b=fetch("${base}q-bundle-graph-${manifestHash}.json");import("${base}${preloadChunk}").then(({l,p})=>{l(${JSON.stringify(base)},b${optsStr});p(${JSON.stringify(referencedBundles)});})`;
     /**
      * Uses the preloader chunk to add the `<link>` elements at runtime. This allows core to simply
      * import the preloader as well and have all the state there, plus it makes it easy to write a
      * complex implementation.
+     *
+     * Note that we don't preload the preloader or bundlegraph, they are requested after the SSR
+     * preloads because they are not as important. Also the preloader includes the vitePreload
+     * function and will in fact already be in that list.
      */
     nodes.push(
       jsx('script', {
         type: 'module',
         'q:type': 'link-js',
-        dangerouslySetInnerHTML: `import("${base}${preloadChunk}").then(({l,p})=>{l(${JSON.stringify(base)}${manifestHash ? `,${JSON.stringify(manifestHash)}` : ''}${optsStr});p(${JSON.stringify(referencedBundles)});})`,
+        dangerouslySetInnerHTML: script,
         nonce,
       })
     );
@@ -117,7 +115,7 @@ function normalizePrefetchImplementation(
 }
 
 const PrefetchImplementationDefault: Required<PrefetchImplementation> = {
-  maxPreloads: import.meta.env.DEV ? 10 : 5,
+  maxPreloads: import.meta.env.DEV ? 15 : 7,
   minProbability: 0.6,
   debug: false,
   maxSimultaneousPreloads: 5,