fix: under-prefetching — bundle graph missing dynamic dependencies

.changeset/approach-bed-gift.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+🐞 🩹 The qwik-city ServiceWorkerRegister and qwik PrefetchServiceWorker now prefetch all their qrls to prevent under-prefetching

packages/docs/src/root.tsx

@@ -55,6 +55,7 @@ export default component$(() => {
         <meta charset="utf-8" />
         <script dangerouslySetInnerHTML={uwu} />
         <RouterHead />
+
         <ServiceWorkerRegister />
 
         <script dangerouslySetInnerHTML={`(${collectSymbols})()`} />
@@ -68,7 +69,6 @@ export default component$(() => {
       >
         <RouterOutlet />
         <RealMetricsOptimization builderApiKey={BUILDER_PUBLIC_API_KEY} />
-        {/* Core Web Vitals experiment until November 8: Do not bring back any SW until then! Reach out to @maiieul first if you believe you have a good reason to change this. */}
       </body>
     </QwikCityProvider>
   );

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

@@ -406,7 +406,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface QwikBundle \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[dynamicImports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[imports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[isTask?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_ Not precise, but an indication of whether this import may be a task\n\n\n</td></tr>\n<tr><td>\n\n[origins?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[size](#)\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[symbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface QwikBundle \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[dynamicImports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[hasSymbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[imports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[origins?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[size](#)\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[symbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\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.qwikbundle.md"
     },

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

@@ -1320,13 +1320,13 @@ _(Optional)_
 </td></tr>
 <tr><td>
 
-[imports?](#)
+[hasSymbols?](#)
 
 </td><td>
 
 </td><td>
 
-string[]
+boolean
 
 </td><td>
 
@@ -1335,17 +1335,17 @@ _(Optional)_
 </td></tr>
 <tr><td>
 
-[isTask?](#)
+[imports?](#)
 
 </td><td>
 
 </td><td>
 
-boolean
+string[]
 
 </td><td>
 
-_(Optional)_ Not precise, but an indication of whether this import may be a task
+_(Optional)_
 
 </td></tr>
 <tr><td>

packages/qwik-city/src/buildtime/runtime-generation/generate-service-worker.ts

@@ -58,15 +58,27 @@ export function generateAppBundles(appBundles: AppBundle[], manifest: QwikManife
     const symbolHashesInBundle: string[] = [];
 
     const manifestBundle = manifest.bundles[appBundleName];
-    const importedBundleNames = Array.isArray(manifestBundle.imports) ? manifestBundle.imports : [];
+    const staticDepsNames = Array.isArray(manifestBundle.imports) ? manifestBundle.imports : [];
 
-    const depsSet = new Set(importedBundleNames);
+    const dynamicDepsNames = [];
+    for (const dynamicDepName of manifestBundle.dynamicImports || []) {
+      const dynamicDep = manifest.bundles[dynamicDepName];
+      if (!manifest.bundles[dynamicDepName]) {
+        continue;
+      }
+      if (dynamicDep.hasSymbols) {
+        dynamicDepsNames.push(dynamicDepName);
+      }
+    }
+    const depsNames = [...staticDepsNames, ...dynamicDepsNames];
+    const depsNamesSet = new Set(depsNames);
 
-    for (const importedBundleName of importedBundleNames) {
-      clearTransitiveDeps(depsSet, new Set(), importedBundleName);
+    for (const depName of depsNames) {
+      clearTransitiveDeps(depsNamesSet, new Set(), depName);
     }
+
     // set the imports based on the sorted index number
-    appBundle[1] = Array.from(depsSet).map((dep) => sortedBundles.indexOf(dep));
+    appBundle[1] = Array.from(depsNamesSet).map((dep) => sortedBundles.indexOf(dep));
 
     if (manifestBundle.symbols) {
       for (const manifestBundleSymbolName of manifestBundle.symbols) {

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

@@ -177,8 +177,9 @@ export interface QwikBundle {
     // (undocumented)
     dynamicImports?: string[];
     // (undocumented)
+    hasSymbols?: boolean;
+    // (undocumented)
     imports?: string[];
-    isTask?: boolean;
     // (undocumented)
     origins?: string[];
     // (undocumented)

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

@@ -279,10 +279,10 @@ export function generateManifestFromBundles(
 
     const bundle: QwikBundle = {
       size: outputBundle.code.length,
+      hasSymbols: false,
     };
 
     let hasSymbols = false;
-    let hasHW = false;
     for (const symbol of outputBundle.exports) {
       if (qrlNames.has(symbol)) {
         // When not minifying we see both the entry and the segment file
@@ -292,12 +292,9 @@ export function generateManifestFromBundles(
           manifest.mapping[symbol] = bundleFileName;
         }
       }
-      if (symbol === '_hW') {
-        hasHW = true;
-      }
     }
-    if (hasSymbols && hasHW) {
-      bundle.isTask = true;
+    if (hasSymbols) {
+      bundle.hasSymbols = true;
     }
 
     const bundleImports = outputBundle.imports

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

@@ -879,9 +879,6 @@ export const manifest = ${JSON.stringify(manifest)};\n`;
     }
   }
 
-  // This groups all QRL segments into their respective entry points
-  // optimization opportunity: group small segments that don't import anything into smallish chunks
-  // order by discovery time, so that related segments are more likely to group together
   function manualChunks(id: string, { getModuleInfo }: Rollup.ManualChunkMeta) {
     if ((opts.entryStrategy as SmartEntryStrategy).manual) {
       const module = getModuleInfo(id)!;
@@ -895,18 +892,6 @@ export const manifest = ${JSON.stringify(manifest)};\n`;
         }
       }
     }
-
-    if (id.includes('node_modules')) {
-      return null;
-    }
-
-    // Patch to prevent over-prefetching, we must clearly separate .tsx/.jsx chunks so that rollup doesn't mix random imports into non-entry files such as hooks.
-    // Maybe a better solution would be to mark those files as entires earlier in the chain so that we can remove this check and the one above altogether.
-    // We check .(tsx|jsx) after node_modules in case some node_modules end with .jsx or .tsx.
-    if (/\.(tsx|jsx)$/.test(id)) {
-      return id;
-    }
-
     return null;
   }
 

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

@@ -1179,7 +1179,8 @@ export function convertManifestToBundleGraph(manifest: QwikManifest): QwikBundle
         // external dependency
         continue;
       }
-      if (dep.isTask) {
+      // prevent importing all segments chunks
+      if (dep.hasSymbols) {
         if (!didAdd) {
           deps.add('<dynamic>');
           didAdd = true;

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

@@ -270,8 +270,7 @@ export interface QwikSymbol {
 /** @public */
 export interface QwikBundle {
   size: number;
-  /** Not precise, but an indication of whether this import may be a task */
-  isTask?: boolean;
+  hasSymbols?: boolean;
   symbols?: string[];
   imports?: string[];
   dynamicImports?: string[];