diff --git a/packages/docs/src/root.tsx b/packages/docs/src/root.tsx
index e3c16689546..5e160294083 100644
--- a/packages/docs/src/root.tsx
+++ b/packages/docs/src/root.tsx
@@ -1,5 +1,5 @@
import { component$, useContextProvider, useStore } from '@builder.io/qwik';
-import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
import { Insights } from '@builder.io/qwik-labs';
import RealMetricsOptimization from './components/real-metrics-optimization/real-metrics-optimization';
import { RouterHead } from './components/router-head/router-head';
@@ -56,7 +56,7 @@ export default component$(() => {
-
+ {/* */}
diff --git a/packages/docs/vite.config.mts b/packages/docs/vite.config.mts
index e0d7cbfd1ac..6cbf4343127 100644
--- a/packages/docs/vite.config.mts
+++ b/packages/docs/vite.config.mts
@@ -173,7 +173,7 @@ export default defineConfig(async () => {
],
},
}),
- qwikVite({ debug: false }),
+ qwikVite({ debug: true }),
partytownVite({
dest: resolve('dist', '~partytown'),
}),
diff --git a/packages/qwik/src/core/preloader/bundle-graph.ts b/packages/qwik/src/core/preloader/bundle-graph.ts
index facab9a9f09..bb02663e484 100644
--- a/packages/qwik/src/core/preloader/bundle-graph.ts
+++ b/packages/qwik/src/core/preloader/bundle-graph.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
import { isBrowser } from '@builder.io/qwik/build';
import {
config,
@@ -53,10 +54,12 @@ export const parseBundleGraph = (serialized: (string | number)[]) => {
export const getBundle = (name: string) => {
let bundle = bundles.get(name);
+ console.log('bundle :', bundle);
if (!bundle) {
let deps: ImportProbability[] | undefined;
if (graph) {
deps = graph.get(name);
+ console.log('deps :', deps);
if (!deps) {
return;
}
diff --git a/packages/qwik/src/core/preloader/queue.ts b/packages/qwik/src/core/preloader/queue.ts
index c52b6c5c76e..20e0a7fc512 100644
--- a/packages/qwik/src/core/preloader/queue.ts
+++ b/packages/qwik/src/core/preloader/queue.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
import { isBrowser } from '@builder.io/qwik/build';
import { base, getBundle, graph } from './bundle-graph';
import {
@@ -68,6 +69,8 @@ export const getQueue = () => {
* We make sure to first preload the high priority items.
*/
export const trigger = () => {
+ const params = new URLSearchParams(window.location.search);
+ const limit = params.get('limit');
if (!queue.length) {
return;
}
@@ -75,17 +78,29 @@ export const trigger = () => {
while (queue.length) {
const bundle = queue[0];
const inverseProbability = bundle.$inverseProbability$;
+ console.log('inverseProbability', inverseProbability);
const probability = 1 - inverseProbability;
- const allowedPreloads = graph
- ? // The more likely the bundle, the more simultaneous preloads we want to allow
- Math.max(1, config[maxSimultaneousPreloadsStr] * probability)
- : // While the graph is not available, we limit to 2 preloads
- 2;
- if (preloadCount < allowedPreloads) {
+ console.log('probability', probability);
+ console.log('limit :', limit);
+
+ if (probability === 1) {
queue.shift();
preloadOne(bundle);
} else {
- break;
+ const allowedPreloads = graph
+ ? // The more likely the bundle, the more simultaneous preloads we want to allow
+ Math.max(1, (Number(limit) || config[maxSimultaneousPreloadsStr]) * probability)
+ : // While the graph is not available, we limit to 2 preloads
+ 2;
+ console.log('allowedPreloads :', allowedPreloads);
+ console.log('preloadCount :', preloadCount);
+
+ if (preloadCount < allowedPreloads) {
+ queue.shift();
+ preloadOne(bundle);
+ } else {
+ break;
+ }
}
}
/**
@@ -169,6 +184,7 @@ export const adjustProbabilities = (
seen ||= new Set();
seen.add(bundle);
for (const dep of bundle.$deps$) {
+ console.log('dep :', dep);
const depBundle = getBundle(dep.$name$)!;
const prevAdjust = dep.$factor$;
/**
diff --git a/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts b/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts
index 87a62e7d405..8c6a6a3b719 100644
--- a/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts
+++ b/packages/qwik/src/optimizer/src/plugins/bundle-graph.ts
@@ -1,9 +1,6 @@
+import { getSymbolHash } from 'packages/qwik/src/core/qrl/qrl-class';
import type { QwikBundle, QwikBundleGraph, QwikManifest } from '../types';
-const minimumSpeed = 300; // kbps
-// size that takes 0.5 seconds to download at minimumSpeed
-const slowSize = 0.5 / ((minimumSpeed * 1024) / 8);
-
/**
* A function that returns a map of bundle names to their dependencies.
*
@@ -13,14 +10,7 @@ export type BundleGraphAdder = (
manifest: QwikManifest
) => Record;
-const getSymbolHash = (symbolName: string) => {
- const index = symbolName.lastIndexOf('_');
- if (index > -1) {
- return symbolName.slice(index + 1);
- }
- return symbolName;
-};
-
+const dynamicTag = '';
/**
* This creates a compact array of dependencies for each bundle. It also contains the symbols. The
* format is:
@@ -42,18 +32,18 @@ export function convertManifestToBundleGraph(
if (!manifest.bundles) {
return [];
}
- // All known chunks and symbols
+ // All known chunks
const graph = { ...manifest.bundles };
- for (const [symbol, bundleName] of Object.entries(manifest.mapping)) {
- const hash = getSymbolHash(symbol);
- if (hash) {
- /**
- * We use dynamic imports so that we will get probabilities for the bundle when preloading the
- * symbol. We still confirm load at 100% probability with the bundle name.
- */
- graph[hash] = { dynamicImports: [bundleName] } as QwikBundle;
- }
- }
+ // Symbols
+ Object.assign(
+ graph,
+ Object.fromEntries(
+ Object.entries(manifest.mapping).map(([symbol, chunkname]) => [
+ getSymbolHash(symbol),
+ { imports: [chunkname] } as QwikBundle,
+ ])
+ )
+ );
// Routes etc
if (bundleGraphAdders) {
for (const adder of bundleGraphAdders) {
@@ -64,11 +54,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];
@@ -135,47 +120,13 @@ export function convertManifestToBundleGraph(
clearTransitiveDeps(deps, depName);
}
const dynDeps = new Set(bundle.dynamicImports!);
- const depProbability = new Map();
for (const depName of dynDeps) {
clearTransitiveDeps(dynDeps, depName);
- const dep = graph[depName];
-
- // 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;
-
- // If the dependency has a segment from the same parent, it's more likely to be loaded
- if (bundle.origins && dep.origins) {
- for (const origin of bundle.origins) {
- if (dep.origins.some((o) => o.startsWith(origin))) {
- // Add a 25% chance
- probability += 0.25;
- break;
- }
- }
- }
-
- // If the dependency is a likely big import graph, it should be loaded earlier so it doesn't get blocked by smaller files, but when unlikely it should be loaded later so it doesn't block other files
- if (dep.total > slowSize) {
- probability += probability > 0.5 ? 0.02 : -0.02;
- }
-
- depProbability.set(depName, probability);
}
-
if (dynDeps.size > 0) {
- const sorted = Array.from(dynDeps).sort(
- (a, b) => depProbability.get(b)! - depProbability.get(a)!
- );
- let lastProbability = -1;
// We rely on the Set keeping the items in order, everything after this is dynamic
- for (const depName of sorted) {
- if (depProbability.get(depName)! !== lastProbability) {
- lastProbability = depProbability.get(depName)!;
- deps.add(-Math.round(lastProbability * 10) as any as string);
- }
+ deps.add(dynamicTag);
+ for (const depName of dynDeps) {
deps.add(depName);
}
}
@@ -195,9 +146,8 @@ export function convertManifestToBundleGraph(
let { index, deps } = bundle;
index++;
for (const depName of deps) {
- if (typeof depName === 'number') {
- // negative number means dynamic import
- bundleGraph[index++] = depName;
+ if (depName === dynamicTag) {
+ bundleGraph[index++] = -1;
continue;
}
const dep = map.get(depName)!;