wip

Author: wmertens

packages/qwik-city/src/buildtime/vite/get-route-imports.ts

@@ -12,15 +12,15 @@ export function getRouteImports(routes: BuildRoute[], manifest: QwikManifest) {
       : [];
     const routeAndLayoutPaths = [routePath, ...layoutPaths];
 
-    const imports = [];
+    const bundles = [];
 
     for (const [bundleName, bundle] of Object.entries(manifest.bundles)) {
       if (isBundlePartOfRoute(bundle, routeAndLayoutPaths)) {
-        imports.push(bundleName);
+        bundles.push(bundleName);
       }
     }
-    if (imports.length > 0) {
-      result[route.routeName] = { imports };
+    if (bundles.length > 0) {
+      result[route.routeName] = { dynamicImports: bundles };
     }
   });
   for (const bundleName of Object.keys(manifest.bundles)) {

packages/qwik-city/src/buildtime/vite/get-route-imports.unit.ts

@@ -56,12 +56,12 @@ describe('modifyBundleGraph', () => {
     expect(actualResult).toMatchInlineSnapshot(`
       {
         "/": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle1.js",
           ],
         },
         "/subroute": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle-part-of-sub-route.js",
             "fake-bundle-part-of-layout.js",
           ],
@@ -102,7 +102,7 @@ describe('modifyBundleGraph', () => {
     expect(actualResult).toMatchInlineSnapshot(`
       {
         "/": {
-          "imports": [
+          "dynamicImports": [
             "fake-bundle1.js",
             "fake-bundle2.js",
           ],

packages/qwik-labs/src-vite/insights/index.ts

@@ -1,4 +1,4 @@
-import { type QwikVitePlugin } from '@builder.io/qwik/optimizer';
+import { type QwikVitePlugin, type SmartEntryStrategy } from '@builder.io/qwik/optimizer';
 import { existsSync, mkdirSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
 import { join, resolve } from 'node:path';
@@ -63,9 +63,6 @@ export async function qwikInsights(qwikInsightsOpts: {
           throw new Error('Missing vite-plugin-qwik');
         }
         const opts = qwikVitePlugin.api.getOptions();
-        if (opts.entryStrategy.type !== 'smart') {
-          return;
-        }
         if (isProd) {
           try {
             const qManifest: InsightManifest = { manual: {}, prefetch: [] };
@@ -85,9 +82,12 @@ export async function qwikInsights(qwikInsightsOpts: {
         }
 
         if (data) {
-          opts.entryStrategy.manual = { ...data.manual, ...opts.entryStrategy.manual };
+          (opts.entryStrategy as SmartEntryStrategy).manual = {
+            ...data.manual,
+            ...(opts.entryStrategy as SmartEntryStrategy).manual,
+          };
 
-          qwikVitePlugin.api.registerBundleGraphAdder(() => {
+          qwikVitePlugin.api.registerBundleGraphAdder((manifest) => {
             const result: Record<
               string,
               { imports?: string[] | undefined; dynamicImports?: string[] | undefined }
@@ -101,7 +101,7 @@ export async function qwikInsights(qwikInsightsOpts: {
                 if (!route.endsWith('/')) {
                   route += '/';
                 }
-                result[route] = { imports: item.symbols };
+                result[route] = { ...manifest.bundles[route], imports: item.symbols };
               }
             }
             return result;

packages/qwik/src/core/preloader.ts

@@ -58,7 +58,6 @@ const preloadStr = 'preload';
 
 let highCount = 0;
 let lowCount = 0;
-const max = 11;
 /**
  * This is called when a bundle is queued or finished loading.
  *
@@ -68,11 +67,11 @@ const max = 11;
  * We make sure to first empty the high priority items, first-in-last-out.
  */
 const trigger = () => {
-  while (highCount < max && high.length) {
+  while (highCount < 8 && high.length) {
     const bundle = high.pop()!;
     preloadOne(bundle!, true);
   }
-  while (highCount + lowCount < max && low.length) {
+  while (highCount + lowCount < 4 && low.length) {
     const bundle = low.pop()!;
     preloadOne(bundle!);
   }
@@ -127,7 +126,8 @@ const preloadOne = (bundle: BundleImport, priority?: boolean) => {
     preload(bundle.$imports$, priority);
     preload(bundle.$dynamicImports$);
   } else {
-    preload([...bundle.$imports$, ...bundle.$dynamicImports$]);
+    // only preload direct imports, low priority
+    preload(bundle.$imports$);
   }
 };
 
@@ -154,7 +154,7 @@ const ensureBundle = (name: string) => {
   return bundle;
 };
 
-const parseBundleGraph = (text: string, base: string) => {
+const parseBundleGraph = (text: string) => {
   const graph = JSON.parse(text) as QwikBundleGraph;
   let i = 0;
   // All existing loading bundles need imports processed
@@ -225,7 +225,7 @@ const loadBundleGraph = (basePath: string, manifestHash: string) => {
   // TODO check TTI, maybe inject fetch link with timeout so we don't do the fetch directly
   fetch(`${basePath}q-bundle-graph-${manifestHash}.json`)
     .then((res) => res.text())
-    .then((text) => parseBundleGraph(text, basePath))
+    .then((text) => parseBundleGraph(text))
     // We warn because it's not critical, and in the CI tests Windows serves up a HTML file instead the bundle graph sometimes, which breaks the tests that don't expect error logs
     .catch(console.warn);
 };

packages/qwik/src/core/qrl/qrl-class.ts

@@ -231,7 +231,7 @@ export const createQRL = <TYPE>(
     seal(qrl);
   }
   console.warn('QRL created', symbol);
-  preload(hash, true);
+  preload(hash);
   return qrl;
 };
 

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

@@ -61,7 +61,7 @@ export function convertManifestToBundleGraph(
 
     // We only include dynamic imports that have qrl segments
     // If the dev wants to include other dynamic imports, they can just make a qrl()
-    const dynamicImports = bundle.dynamicImports?.filter((dep) => graph[dep]) || [];
+    const dynamicImports = bundle.dynamicImports?.filter((dep) => graph[dep]?.hasSegments) || [];
 
     // Overwrite so we don't mutate
     graph[bundleName] = {

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

@@ -44,7 +44,7 @@ describe('convertManifestToBundleGraph', () => {
     version: '1.0.0',
   } as QwikManifest;
 
-  test.skip('trivial example', () => {
+  test('trivial example', () => {
     expect(convertManifestToBundleGraph(fakeManifest)).toEqual([
       'app.js', // 0
       2,
@@ -101,7 +101,7 @@ describe('convertManifestToBundleGraph', () => {
     ]);
   });
 
-  test.skip('adder', () => {
+  test('adder', () => {
     expect(
       convertManifestToBundleGraph(
         fakeManifest,
@@ -156,35 +156,27 @@ describe('convertManifestToBundleGraph', () => {
     expect(convertManifestToBundleGraph(manifest)).toMatchInlineSnapshot(`
       [
         "app.js",
-        30,
-        31,
+        22,
+        23,
         -1,
         19,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_1_WC1qsF4RHoU.js",
         0,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_2_cibDwmrlmRI.js",
         0,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_3_dHjr9JWbW34.js",
-        30,
+        22,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_4_5fYbrS6ABNA.js",
-        30,
+        22,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_5_rpMfjSetIeI.js",
-        30,
+        22,
         "app.tsx_App_component_div_div_div_div_div_div_button_onClick_wEyctjlC58Q.js",
         0,
         "app.tsx_App_component_div_table_tbody_tr_td_a_onClick_DDeCLEw4BYU.js",
-        30,
+        22,
         "app.tsx_App_component_jn5XSz7NZ88.js",
-        30,
-        31,
-        -1,
-        5,
-        7,
-        9,
-        11,
-        13,
-        15,
-        17,
+        22,
+        23,
         "core.js",
         "preload-helper.js",
         "root.js",

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

@@ -143,26 +143,22 @@ function linkJsImplementation(
   }
   const manifestHash = manifest.manifestHash;
   const urls = flattenPrefetchResources(prefetchResources);
-  const fetchPriority = prefetchImpl.linkFetchPriority;
-  const forceLow = fetchPriority === 'low';
   const prio = [];
-  const low = [];
   for (const [url, priority] of urls) {
-    if (!priority || forceLow) {
-      low.push(url);
-    } else {
+    // we only want the static imports, the rest will follow as needed
+    if (priority) {
       prio.push(url);
     }
   }
 
   // TODO modulepreload the preloader before ssr, optional because we can't predict if we need it
-  if (urls.size) {
-    // We mark all the urls as low priority, so that newly needed urls are loaded first
+  if (prio.length) {
+    // We mark all the urls as low priority, so that newly needed resources are loaded first
     // We use a Promise so the script doesn't block the initial page load
     const script = `
     import("${base}${preloadChunk}").then(({l,p})=>{
     l(${JSON.stringify(base)},${JSON.stringify(manifestHash)});
-    p(${JSON.stringify([...prio, ...low])});
+    p(${JSON.stringify(prio.slice(0, 10))});
     })
   `.replaceAll(/^\s+|\s*\n/gm, '');
 
@@ -174,7 +170,7 @@ function linkJsImplementation(
         href: `${base}q-bundle-graph-${manifestHash}.json`,
         as: 'fetch',
         crossorigin: 'anonymous',
-        fetchpriority: prefetchImpl.linkFetchPriority || undefined,
+        fetchpriority: 'low',
       })
     );
     prefetchNodes.push(