wip 2: don't use preload for low prio

Author: wmertens

packages/qwik/src/core/preloader.ts

@@ -49,6 +49,8 @@ let base: string | undefined;
 const doc = isBrowser ? document : undefined!;
 const modulePreloadStr = 'modulepreload';
 const preloadStr = 'preload';
+const pushStr = 'push';
+const unshiftStr = 'unshift';
 
 const makeBundle = (path: string, imports: string[], dynamicImports: string[]) => {
   const url = path.endsWith('.js') ? new URL(`${base}${path}`, doc.baseURI).toString() : null;
@@ -86,11 +88,11 @@ const rel =
 let highCount = 0;
 let lowCount = 0;
 const trigger = () => {
-  while (highCount < 4 && high.length) {
+  while (highCount < 6 && high.length) {
     const bundle = high.pop()!;
     makePreloadLink(bundle!, true);
   }
-  while (lowCount < 2 && low.length) {
+  while (lowCount < 3 && low.length) {
     const bundle = low.pop()!;
     makePreloadLink(bundle!);
   }
@@ -103,13 +105,11 @@ const makePreloadLink = (bundle: BundleImport, priority?: boolean) => {
   bundle.$state$ = BundleImportState.Loading;
   const link = doc.createElement('link');
   link.href = bundle.$url$!;
+  link.rel = rel;
   if (priority) {
     highCount++;
-    link.rel = rel;
   } else {
     lowCount++;
-    link.rel = preloadStr;
-    link.fetchPriority = 'low';
   }
   link.as = 'script';
   link.onload = link.onerror = () => {
@@ -126,16 +126,7 @@ const makePreloadLink = (bundle: BundleImport, priority?: boolean) => {
   return 1;
 };
 
-const preloadBundle = (bundle: BundleImport, priority: boolean) => {
-  if (bundle.$state$ > BundleImportState.Queued) {
-    return;
-  }
-  if (bundle.$url$) {
-    (priority ? high : low).unshift(bundle);
-  }
-  bundle.$state$ = priority ? BundleImportState.Queued : BundleImportState.Low;
-};
-
+let method = unshiftStr;
 /**
  * Preload a bundle or bundles. Requires calling loadBundleGraph first.
  *
@@ -145,8 +136,11 @@ const preload = (name: string | string[], priority: boolean, seen?: Set<BundleIm
   if (!isBrowser || !base) {
     return;
   }
+  // todo reverse order
   if (Array.isArray(name)) {
+    method = pushStr;
     name.forEach((n) => preload(n, priority));
+    method = unshiftStr;
     return;
   }
   let bundle = bundles.get(name);
@@ -159,7 +153,12 @@ const preload = (name: string | string[], priority: boolean, seen?: Set<BundleIm
     return;
   }
   seen?.add(bundle);
-  preloadBundle(bundle, priority);
+  if (bundle.$state$ < BundleImportState.Queued) {
+    if (bundle.$url$) {
+      (priority ? high : low)[method as 'unshift' | 'push'](bundle);
+    }
+    bundle.$state$ = priority ? BundleImportState.Queued : BundleImportState.Low;
+  }
   for (const importName of bundle.$imports$) {
     preload(importName, priority, seen || new Set([bundle]));
   }

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

@@ -166,6 +166,7 @@ function linkJsImplementation(
     })
   `.replaceAll(/^\s+|\s*\n/gm, '');
 
+    // TODO move this to the top of the page
     prefetchNodes.push(
       jsx('link', {
         rel: 'fetch',

scripts/submodule-preloader.ts

@@ -2,7 +2,7 @@ import { join } from 'node:path';
 import { rollup, type InputOptions, type OutputOptions } from 'rollup';
 import { fileSize, rollupOnWarn, type BuildConfig } from './util';
 import { minify } from 'terser';
-import ts from 'typescript';
+import { transform } from 'esbuild';
 
 /**
  * Builds the qwikloader javascript files. These files can be used by other tooling, and are
@@ -24,19 +24,16 @@ export async function submodulePreloader(config: BuildConfig) {
           return null;
         },
         async transform(code, id) {
-          // use typescript to transpile
-          const result = ts.transpileModule(code, {
-            compilerOptions: {
-              module: ts.ModuleKind.ESNext,
-              // todo get rid of the enum somehow
-              preserveConstEnums: false,
-            },
-            fileName: id,
+          const result = await transform(code, {
+            sourcefile: id,
+            target: 'es2017',
+            format: 'esm',
+            loader: 'ts',
           });
 
           // Rename $properties$ to short names but leave the rest legible
           // The final app will minify it when needed
-          const minified = await minify(result.outputText, {
+          const minified = await minify(result.code, {
             compress: false,
             mangle: {
               toplevel: false,