Merge pull request #7506 from QwikDev/fix-preload-ssr

fix(ssr): preloading fixes and tweaks

Author: wmertens

.changeset/slick-candies-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+FIX: now qwikloader is loaded only once in all cases

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

@@ -5,7 +5,7 @@ import {
   maxSignificantInverseProbabilityStr,
   maxSimultaneousPreloadsStr,
 } from './constants';
-import { adjustProbabilities, bundles, log, trigger } from './queue';
+import { adjustProbabilities, bundles, log, shouldResetFactor, trigger } from './queue';
 import type { BundleGraph, BundleImport, ImportProbability } from './types';
 import { BundleImportState_None, BundleImportState_Alias } from './types';
 
@@ -22,7 +22,7 @@ const makeBundle = (name: string, deps?: ImportProbability[]) => {
     $name$: name,
     $url$: url,
     $state$: url ? BundleImportState_None : BundleImportState_Alias,
-    $deps$: deps,
+    $deps$: shouldResetFactor ? deps?.map((d) => ({ ...d, $factor$: 1 })) : deps,
     $inverseProbability$: 1,
     $createdTs$: Date.now(),
     $waitedMs$: 0,
@@ -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/core/preloader/queue.ts

@@ -17,6 +17,7 @@ import {
 } from './types';
 
 export const bundles: BundleImports = new Map();
+export let shouldResetFactor: boolean;
 let queueDirty: boolean;
 let preloadCount = 0;
 const queue: BundleImport[] = [];
@@ -32,6 +33,7 @@ export const log = (...args: any[]) => {
 export const resetQueue = () => {
   bundles.clear();
   queueDirty = false;
+  shouldResetFactor = true;
   preloadCount = 0;
   queue.length = 0;
 };
@@ -178,6 +180,7 @@ export const adjustProbabilities = (
   if (bundle.$deps$) {
     seen ||= new Set();
     seen.add(bundle);
+    const probability = 1 - bundle.$inverseProbability$;
     for (const dep of bundle.$deps$) {
       const depBundle = getBundle(dep.$name$)!;
       const prevAdjust = dep.$factor$;
@@ -188,7 +191,7 @@ export const adjustProbabilities = (
        * We can multiply this chance together with all other bundle adjustments to get the chance
        * that a dep will be loaded given all the chances of the other bundles
        */
-      const newInverseProbability = 1 - dep.$probability$ * (1 - bundle.$inverseProbability$);
+      const newInverseProbability = 1 - dep.$probability$ * probability;
 
       /** We need to undo the previous adjustment */
       const factor = newInverseProbability / prevAdjust;

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];
@@ -143,8 +138,8 @@ export function convertManifestToBundleGraph(
       // Calculate the probability of the dependency
       // Start with a 50% chance
       let probability = 0.5;
-      // Add a 4% chance for each interactivity point (max 20%)
-      probability += (dep.interactivity || 0) * 0.04;
+      // Add a 8% chance for each interactivity point (max 40%)
+      probability += (dep.interactivity || 0) * 0.08;
 
       // If the dependency has a segment from the same parent, it's more likely to be loaded
       if (bundle.origins && dep.origins) {
@@ -161,8 +156,12 @@ export function convertManifestToBundleGraph(
       if (dep.total > slowSize) {
         probability += probability > 0.5 ? 0.02 : -0.02;
       }
+      // OTOH, if the dependency is small, load it sooner since it won't block much
+      if (dep.total < 1000) {
+        probability += 0.15;
+      }
 
-      depProbability.set(depName, probability);
+      depProbability.set(depName, Math.min(probability, 0.99));
     }
 
     if (dynDeps.size > 0) {