perf(preloader): listen to qwikloader for early preloading

Author: wmertens

packages/docs/src/repl/worker/repl-request-handler.ts

@@ -133,7 +133,7 @@ const injectDevHtml = (clientId: string, html?: string) => {
   });
 
   document.addEventListener('qsymbol', (ev) => {
-    const symbolName = ev.detail;
+    const symbolName = ev.detail?.symbol;
     sendToServerWindow({
       kind: 'symbol',
       scope: 'client',

packages/docs/src/root.tsx

@@ -76,5 +76,7 @@ export default component$(() => {
 
 export function collectSymbols() {
   (window as any).symbols = [];
-  document.addEventListener('qsymbol', (e) => (window as any).symbols.push((e as any).detail));
+  document.addEventListener('qsymbol', (e) =>
+    (window as any).symbols.push((e as any).detail.symbol)
+  );
 }

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

@@ -2194,7 +2194,7 @@
         }
       ],
       "kind": "TypeAlias",
-      "content": "Emitted by qwik-loader when a module was lazily loaded\n\n\n```typescript\nexport type QwikSymbolEvent = CustomEvent<{\n    symbol: string;\n    element: Element;\n    reqTime: number;\n}>;\n```",
+      "content": "Emitted by qwik-loader when a module was lazily loaded\n\n\n```typescript\nexport type QwikSymbolEvent = CustomEvent<{\n    symbol: string;\n    element: Element;\n    reqTime: number;\n    qBase?: string;\n    qManifest?: string;\n    qVersion?: string;\n    href?: string;\n}>;\n```",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/render/jsx/types/jsx-qwik-events.ts",
       "mdFile": "qwik.qwiksymbolevent.md"
     },

packages/docs/src/routes/api/qwik/index.mdx

@@ -4383,6 +4383,10 @@ export type QwikSymbolEvent = CustomEvent<{
   symbol: string;
   element: Element;
   reqTime: number;
+  qBase?: string;
+  qManifest?: string;
+  qVersion?: string;
+  href?: string;
 }>;
 ```
 

packages/docs/src/routes/docs/(qwikcity)/guides/bundle/index.mdx

@@ -139,7 +139,7 @@ To collect symbol usage from a running application:
     ```html
     <script>
       window.symbols = [];
-      document.addEventListener('qsymbol', (e) => window.symbols.push(e.detail));
+      document.addEventListener('qsymbol', (e) => window.symbols.push(e.detail.symbol));
     </script>
     ```
 2. Perform some set of operations mimicking user behavior.

packages/qwik/src/core/preloader/preloader.unit.ts

@@ -21,6 +21,5 @@ test('preloader script', () => {
    * dereference objects etc, but that actually results in worse compression
    */
   const compressed = compress(Buffer.from(preLoader), { mode: 1, quality: 11 });
-  expect(compressed.length).toBe(1722);
-  expect(preLoader.length).toBe(5107);
+  expect([compressed.length, preLoader.length]).toEqual([1785, 5298]);
 });

packages/qwik/src/core/preloader/queue.ts

@@ -8,6 +8,7 @@ import {
   BundleImportState_Preload,
   BundleImportState_Queued,
 } from './types';
+import type { QwikSymbolEvent } from '../render/jsx/types/jsx-qwik-events';
 
 export const bundles: BundleImports = new Map();
 export let shouldResetFactor: boolean;
@@ -184,11 +185,11 @@ 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.
        *
-       * But when we're very likely to load the current bundle, make the dynamic imports more likely
+       * But when we're very likely to load the current bundle, make the dynamic imports very likely
        * too.
        */
       const newInverseProbability =
-        dep.$probability$ !== 1 && adjustFactor < 0.1 ? 0.05 : 1 - dep.$probability$ * probability;
+        dep.$probability$ !== 1 && adjustFactor < 0.1 ? 0.01 : 1 - dep.$probability$ * probability;
 
       /** We need to undo the previous adjustment */
       const factor = newInverseProbability / prevAdjust;
@@ -229,3 +230,15 @@ export const preload = (name: string | (number | string)[], probability?: number
     trigger();
   }
 };
+
+if (isBrowser) {
+  // Get early hints from qwikloader
+  document.addEventListener('qsymbol', (ev) => {
+    const { symbol, href } = (ev as QwikSymbolEvent).detail;
+    // the qrl class doesn't emit href, we don't need to preload
+    if (href) {
+      const hash = symbol.slice(symbol.lastIndexOf('_') + 1);
+      preload(hash, 1);
+    }
+  });
+}

packages/qwik/src/core/qwik.core.api.md

@@ -781,6 +781,10 @@ export type QwikSymbolEvent = CustomEvent<{
     symbol: string;
     element: Element;
     reqTime: number;
+    qBase?: string;
+    qManifest?: string;
+    qVersion?: string;
+    href?: string;
 }>;
 
 // @public @deprecated (undocumented)

packages/qwik/src/core/render/jsx/types/jsx-qwik-events.ts

@@ -3,13 +3,28 @@ import type { AllEventKeys } from './jsx-qwik-attributes';
 /** Emitted by qwik-loader when an element becomes visible. Used by `useVisibleTask$` @public */
 export type QwikVisibleEvent = CustomEvent<IntersectionObserverEntry>;
 /** Emitted by qwik-loader when a module was lazily loaded @public */
-export type QwikSymbolEvent = CustomEvent<{ symbol: string; element: Element; reqTime: number }>;
+export type QwikSymbolEvent = CustomEvent<{
+  symbol: string;
+  element: Element;
+  reqTime: number;
+  qBase?: string;
+  qManifest?: string;
+  qVersion?: string;
+  href?: string;
+}>;
 /** Emitted by qwik-loader on document when the document first becomes interactive @public */
 export type QwikInitEvent = CustomEvent<{}>;
 /** Emitted by qwik-loader on document when the document first becomes idle @public */
 export type QwikIdleEvent = CustomEvent<{}>;
 /** Emitted by qwik-core on document when the a view transition start @public */
 export type QwikViewTransitionEvent = CustomEvent<ViewTransition>;
+/** Emitted by qwik-loader on document when there was an error loading a module @public */
+export type QwikErrorEvent = CustomEvent<
+  {
+    importError?: 'sync' | 'async' | 'no-symbol';
+    error: unknown;
+  } & QwikSymbolEvent['detail']
+>;
 
 // Utility types for supporting autocompletion in union types
 

packages/qwik/src/qwikloader.ts

@@ -1,4 +1,8 @@
-import type { QwikSymbolEvent, QwikVisibleEvent } from './core/render/jsx/types/jsx-qwik-events';
+import type {
+  QwikErrorEvent,
+  QwikSymbolEvent,
+  QwikVisibleEvent,
+} from './core/render/jsx/types/jsx-qwik-events';
 import type { QContainerElement } from './core/container/container';
 import type { QContext } from './core/state/context';
 
@@ -117,7 +121,15 @@ type qWindow = Window & {
         let importError: undefined | 'sync' | 'async' | 'no-symbol';
         let error: undefined | Error;
         const isSync = qrl.startsWith('#');
-        const eventData = { qBase, qManifest, qVersion, href, symbol, element, reqTime };
+        const eventData: QwikSymbolEvent['detail'] = {
+          qBase,
+          qManifest,
+          qVersion,
+          href,
+          symbol,
+          element,
+          reqTime,
+        };
         if (isSync) {
           const hash = container.getAttribute('q:instance')!;
           handler = ((doc as any)['qFuncs_' + hash] || [])[Number.parseInt(symbol)];
@@ -126,6 +138,7 @@ type qWindow = Window & {
             error = new Error('sym:' + symbol);
           }
         } else {
+          emitEvent<QwikSymbolEvent>('qsymbol', eventData);
           const uri = url.href.split('#')[0];
           try {
             const module = import(/* @vite-ignore */ uri);
@@ -141,7 +154,11 @@ type qWindow = Window & {
           }
         }
         if (!handler) {
-          emitEvent('qerror', { importError, error, ...eventData });
+          emitEvent<QwikErrorEvent>('qerror', {
+            importError,
+            error,
+            ...eventData,
+          });
           console.error(error);
           // break out of the loop if handler is not found
           break;
@@ -150,14 +167,13 @@ type qWindow = Window & {
         if (element.isConnected) {
           try {
             doc.__q_context__ = [element, ev, url];
-            isSync || emitEvent<QwikSymbolEvent>('qsymbol', { ...eventData });
             const results = handler(ev, element);
             // only await if there is a promise returned
             if (isPromise(results)) {
               await results;
             }
           } catch (error) {
-            emitEvent('qerror', { error, ...eventData });
+            emitEvent<QwikErrorEvent>('qerror', { error, ...eventData });
           } finally {
             doc.__q_context__ = previousCtx;
           }

packages/qwik/src/qwikloader.unit.ts

@@ -21,9 +21,8 @@ test('qwikloader script', () => {
    * dereference objects etc, but that actually results in worse compression
    */
   const compressed = compress(Buffer.from(qwikLoader), { mode: 1, quality: 11 });
-  expect(compressed.length).toBe(1428);
-  expect(qwikLoader.length).toBe(3126);
+  expect([compressed.length, qwikLoader.length]).toEqual([1421, 3118]);
   expect(qwikLoader).toMatchInlineSnapshot(
-    `"(()=>{const t=document,e=window,n=new Set,o=new Set([t]);let r;const s=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach((n=>e.push(...s(n,t)))),e},i=t=>{w(t),s(t,"[q\\\\:shadowroot]").forEach((t=>{const e=t.shadowRoot;e&&i(e)}))},c=t=>t&&"function"==typeof t.then,l=(t,e,n=e.type)=>{a("[on"+t+"\\\\:"+n+"]").forEach((o=>b(o,t,e,n)))},f=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},p=(t,e)=>new CustomEvent(t,{detail:e}),b=async(e,n,o,r=o.type)=>{const s="on"+n+":"+r;e.hasAttribute("preventdefault:"+r)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+r)&&o.stopPropagation();const a=e._qc_,i=a&&a.li.filter((t=>t[0]===s));if(i&&i.length>0){for(const t of i){const n=t[1].getFn([e,o],(()=>e.isConnected))(o,e),r=o.cancelBubble;c(n)&&await n,r&&o.stopPropagation()}return}const l=e.getAttribute(s);if(l){const n=e.closest("[q\\\\:container]"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",i=new URL(r,t.baseURI);for(const p of l.split("\\n")){const l=new URL(p,i),b=l.href,h=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",q=performance.now();let _,d,y;const w=p.startsWith("#"),g={qBase:r,qManifest:a,qVersion:s,href:b,symbol:h,element:e,reqTime:q};if(w){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(h)],_||(d="sync",y=Error("sym:"+h))}else{const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[h],_||(d="no-symbol",y=Error(\`\${h} not in \${t}\`))}catch(t){d||(d="async"),y=t}}if(!_){u("qerror",{importError:d,error:y,...g}),console.error(y);break}const m=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l],w||u("qsymbol",{...g});const n=_(o,e);c(n)&&await n}catch(t){u("qerror",{error:t,...g})}finally{t.__q_context__=m}}}},u=(e,n)=>{t.dispatchEvent(p(e,n))},h=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),q=async t=>{let e=h(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=b(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type),n=t.bubbles&&!0!==r?n.parentElement:null}},_=t=>{l("-window",t,h(t.type))},d=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(i),r=1,u("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>u("qidle"))),n.has("qvisible"))){const t=a("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),b(n.target,"",p("qvisible",n)))}));t.forEach((t=>e.observe(t)))}},y=(t,e,n,o=!1)=>t.addEventListener(e,n,{capture:o,passive:!1}),w=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>y(t,r,q,!0))),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach((t=>y(r,t,q,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;Array.isArray(r)&&w(...r),e.qwikevents={events:n,roots:o,push:w},y(t,"readystatechange",d),d()}})();"`
+    `"(()=>{const t=document,e=window,n=new Set,o=new Set([t]);let r;const s=(t,e)=>Array.from(t.querySelectorAll(e)),a=t=>{const e=[];return o.forEach((n=>e.push(...s(n,t)))),e},i=t=>{w(t),s(t,"[q\\\\:shadowroot]").forEach((t=>{const e=t.shadowRoot;e&&i(e)}))},c=t=>t&&"function"==typeof t.then,l=(t,e,n=e.type)=>{a("[on"+t+"\\\\:"+n+"]").forEach((o=>b(o,t,e,n)))},f=e=>{if(void 0===e._qwikjson_){let n=(e===t.documentElement?t.body:e).lastElementChild;for(;n;){if("SCRIPT"===n.tagName&&"qwik/json"===n.getAttribute("type")){e._qwikjson_=JSON.parse(n.textContent.replace(/\\\\x3C(\\/?script)/gi,"<$1"));break}n=n.previousElementSibling}}},p=(t,e)=>new CustomEvent(t,{detail:e}),b=async(e,n,o,r=o.type)=>{const s="on"+n+":"+r;e.hasAttribute("preventdefault:"+r)&&o.preventDefault(),e.hasAttribute("stoppropagation:"+r)&&o.stopPropagation();const a=e._qc_,i=a&&a.li.filter((t=>t[0]===s));if(i&&i.length>0){for(const t of i){const n=t[1].getFn([e,o],(()=>e.isConnected))(o,e),r=o.cancelBubble;c(n)&&await n,r&&o.stopPropagation()}return}const l=e.getAttribute(s);if(l){const n=e.closest("[q\\\\:container]"),r=n.getAttribute("q:base"),s=n.getAttribute("q:version")||"unknown",a=n.getAttribute("q:manifest-hash")||"dev",i=new URL(r,t.baseURI);for(const p of l.split("\\n")){const l=new URL(p,i),b=l.href,h=l.hash.replace(/^#?([^?[|]*).*$/,"$1")||"default",q=performance.now();let _,d,y;const w=p.startsWith("#"),g={qBase:r,qManifest:a,qVersion:s,href:b,symbol:h,element:e,reqTime:q};if(w){const e=n.getAttribute("q:instance");_=(t["qFuncs_"+e]||[])[Number.parseInt(h)],_||(d="sync",y=Error("sym:"+h))}else{u("qsymbol",g);const t=l.href.split("#")[0];try{const e=import(t);f(n),_=(await e)[h],_||(d="no-symbol",y=Error(\`\${h} not in \${t}\`))}catch(t){d||(d="async"),y=t}}if(!_){u("qerror",{importError:d,error:y,...g}),console.error(y);break}const m=t.__q_context__;if(e.isConnected)try{t.__q_context__=[e,o,l];const n=_(o,e);c(n)&&await n}catch(t){u("qerror",{error:t,...g})}finally{t.__q_context__=m}}}},u=(e,n)=>{t.dispatchEvent(p(e,n))},h=t=>t.replace(/([A-Z])/g,(t=>"-"+t.toLowerCase())),q=async t=>{let e=h(t.type),n=t.target;for(l("-document",t,e);n&&n.getAttribute;){const o=b(n,"",t,e);let r=t.cancelBubble;c(o)&&await o,r=r||t.cancelBubble||n.hasAttribute("stoppropagation:"+t.type),n=t.bubbles&&!0!==r?n.parentElement:null}},_=t=>{l("-window",t,h(t.type))},d=()=>{var s;const c=t.readyState;if(!r&&("interactive"==c||"complete"==c)&&(o.forEach(i),r=1,u("qinit"),(null!=(s=e.requestIdleCallback)?s:e.setTimeout).bind(e)((()=>u("qidle"))),n.has("qvisible"))){const t=a("[on\\\\:qvisible]"),e=new IntersectionObserver((t=>{for(const n of t)n.isIntersecting&&(e.unobserve(n.target),b(n.target,"",p("qvisible",n)))}));t.forEach((t=>e.observe(t)))}},y=(t,e,n,o=!1)=>t.addEventListener(e,n,{capture:o,passive:!1}),w=(...t)=>{for(const r of t)"string"==typeof r?n.has(r)||(o.forEach((t=>y(t,r,q,!0))),y(e,r,_,!0),n.add(r)):o.has(r)||(n.forEach((t=>y(r,t,q,!0))),o.add(r))};if(!("__q_context__"in t)){t.__q_context__=0;const r=e.qwikevents;Array.isArray(r)&&w(...r),e.qwikevents={events:n,roots:o,push:w},y(t,"readystatechange",d),d()}})();"`
   );
 });