perf: better minify qwikloader

Author: wmertens

packages/qwik/package.json

@@ -127,8 +127,6 @@
     },
     "./qwikloader.js": "./dist/qwikloader.js",
     "./qwikloader.debug.js": "./dist/qwikloader.debug.js",
-    "./qwik-prefetch.js": "./dist/qwik-prefetch.js",
-    "./qwik-prefetch.debug.js": "./dist/qwik-prefetch.debug.js",
     "./package.json": "./dist/package.json"
   },
   "files": [

packages/qwik/src/qwikloader-entry.ts

@@ -2,6 +2,14 @@ import type { QwikSymbolEvent, QwikVisibleEvent } from './core/render/jsx/types/
 import type { QContainerElement } from './core/container/container';
 import type { QContext } from './core/state/context';
 
+type qWindow = Window & {
+  qwikevents: {
+    events: Set<string>;
+    roots: Set<Node>;
+    push: (...e: (string | (EventTarget & ParentNode))[]) => void;
+  };
+};
+
 /**
  * Set up event listening for browser.
  *
@@ -11,31 +19,14 @@ import type { QContext } from './core/state/context';
  * @param doc - Document to use for setting up global listeners, and to determine all the browser
  *   supported events.
  */
-export const qwikLoader = (
-  doc: Document & { __q_context__?: [Element, Event, URL] | 0 },
-  hasInitialized?: number
-) => {
-  const Q_CONTEXT = '__q_context__';
-  type qWindow = Window & {
-    qwikevents: {
-      events: Set<string>;
-      roots: Set<Node>;
-      push: (...e: (string | (EventTarget & ParentNode))[]) => void;
-    };
-  };
+(() => {
+  const doc = document as Document & { __q_context__?: [Element, Event, URL] | 0 };
   const win = window as unknown as qWindow;
   const events = new Set<string>();
   const roots = new Set<EventTarget & ParentNode>([doc]);
 
-  // Some shortenings for minification
-  const replace = 'replace';
-  const forEach = 'forEach';
-  const target = 'target';
-  const getAttribute = 'getAttribute';
-  const isConnected = 'isConnected';
-  const qvisible = 'qvisible';
-  const Q_JSON = '_qwikjson_';
-  const qContainerAttr = '[q\\:container]';
+  let hasInitialized: number;
+
   const nativeQuerySelectorAll = (root: ParentNode, selector: string) =>
     Array.from(root.querySelectorAll(selector));
   const querySelectorAll = (query: string) => {
@@ -54,19 +45,19 @@ export const qwikLoader = (
   const isPromise = (promise: Promise<any>) => promise && typeof promise.then === 'function';
 
   const broadcast = (infix: string, ev: Event, type = ev.type) => {
-    querySelectorAll('[on' + infix + '\\:' + type + ']')[forEach]((el) =>
+    querySelectorAll('[on' + infix + '\\:' + type + ']').forEach((el) =>
       dispatch(el, infix, ev, type)
     );
   };
 
   const resolveContainer = (containerEl: QContainerElement) => {
-    if (containerEl[Q_JSON] === undefined) {
+    if (containerEl._qwikjson_ === undefined) {
       const parentJSON = containerEl === doc.documentElement ? doc.body : containerEl;
       let script = parentJSON.lastElementChild;
       while (script) {
-        if (script.tagName === 'SCRIPT' && script[getAttribute]('type') === 'qwik/json') {
-          containerEl[Q_JSON] = JSON.parse(
-            script.textContent![replace](/\\x3C(\/?script)/gi, '<$1')
+        if (script.tagName === 'SCRIPT' && script.getAttribute('type') === 'qwik/json') {
+          containerEl._qwikjson_ = JSON.parse(
+            script.textContent!.replace(/\\x3C(\/?script)/gi, '<$1')
           );
           break;
         }
@@ -93,12 +84,12 @@ export const qwikLoader = (
     if (element.hasAttribute('stoppropagation:' + eventName)) {
       ev.stopPropagation();
     }
-    const ctx = element['_qc_'];
+    const ctx = element._qc_;
     const relevantListeners = ctx && ctx.li.filter((li) => li[0] === attrName);
     if (relevantListeners && relevantListeners.length > 0) {
       for (const listener of relevantListeners) {
         // listener[1] holds the QRL
-        const results = listener[1].getFn([element, ev], () => element[isConnected])(ev, element);
+        const results = listener[1].getFn([element, ev], () => element.isConnected)(ev, element);
         const cancelBubble = ev.cancelBubble;
         if (isPromise(results)) {
           await results;
@@ -110,17 +101,17 @@ export const qwikLoader = (
       }
       return;
     }
-    const attrValue = element[getAttribute](attrName);
+    const attrValue = element.getAttribute(attrName);
     if (attrValue) {
-      const container = element.closest(qContainerAttr)! as QContainerElement;
-      const qBase = container[getAttribute]('q:base')!;
-      const qVersion = container[getAttribute]('q:version') || 'unknown';
-      const qManifest = container[getAttribute]('q:manifest-hash') || 'dev';
+      const container = element.closest('[q\\:container]')! as QContainerElement;
+      const qBase = container.getAttribute('q:base')!;
+      const qVersion = container.getAttribute('q:version') || 'unknown';
+      const qManifest = container.getAttribute('q:manifest-hash') || 'dev';
       const base = new URL(qBase, doc.baseURI);
       for (const qrl of attrValue.split('\n')) {
         const url = new URL(qrl, base);
         const href = url.href;
-        const symbol = url.hash[replace](/^#?([^?[|]*).*$/, '$1') || 'default';
+        const symbol = url.hash.replace(/^#?([^?[|]*).*$/, '$1') || 'default';
         const reqTime = performance.now();
         let handler: undefined | any;
         let importError: undefined | 'sync' | 'async' | 'no-symbol';
@@ -132,7 +123,7 @@ export const qwikLoader = (
           handler = ((doc as any)['qFuncs_' + hash] || [])[Number.parseInt(symbol)];
           if (!handler) {
             importError = 'sync';
-            error = new Error('sync handler error for symbol: ' + symbol);
+            error = new Error('sym:' + symbol);
           }
         } else {
           const uri = url.href.split('#')[0];
@@ -155,10 +146,10 @@ export const qwikLoader = (
           // break out of the loop if handler is not found
           break;
         }
-        const previousCtx = doc[Q_CONTEXT];
-        if (element[isConnected]) {
+        const previousCtx = doc.__q_context__;
+        if (element.isConnected) {
           try {
-            doc[Q_CONTEXT] = [element, ev, url];
+            doc.__q_context__ = [element, ev, url];
             isSync || emitEvent<QwikSymbolEvent>('qsymbol', { ...eventData });
             const results = handler(ev, element);
             // only await if there is a promise returned
@@ -168,7 +159,7 @@ export const qwikLoader = (
           } catch (error) {
             emitEvent('qerror', { error, ...eventData });
           } finally {
-            doc[Q_CONTEXT] = previousCtx;
+            doc.__q_context__ = previousCtx;
           }
         }
       }
@@ -179,7 +170,7 @@ export const qwikLoader = (
     doc.dispatchEvent(createEvent<T>(eventName, detail));
   };
 
-  const camelToKebab = (str: string) => str[replace](/([A-Z])/g, (a) => '-' + a.toLowerCase());
+  const camelToKebab = (str: string) => str.replace(/([A-Z])/g, (a) => '-' + a.toLowerCase());
 
   /**
    * Event handler responsible for processing browser events.
@@ -192,10 +183,10 @@ export const qwikLoader = (
   const processDocumentEvent = async (ev: Event) => {
     // eslint-disable-next-line prefer-const
     let type = camelToKebab(ev.type);
-    let element = ev[target] as Element | null;
+    let element = ev.target as Element | null;
     broadcast('-document', ev, type);
 
-    while (element && element[getAttribute]) {
+    while (element && element.getAttribute) {
       const results = dispatch(element, '', ev, type);
       let cancelBubble = ev.cancelBubble;
       if (isPromise(results)) {
@@ -223,17 +214,17 @@ export const qwikLoader = (
       const riC = win.requestIdleCallback ?? win.setTimeout;
       riC.bind(win)(() => emitEvent('qidle'));
 
-      if (events.has(qvisible)) {
-        const results = querySelectorAll('[on\\:' + qvisible + ']');
+      if (events.has('qvisible')) {
+        const results = querySelectorAll('[on\\:qvisible]');
         const observer = new IntersectionObserver((entries) => {
           for (const entry of entries) {
             if (entry.isIntersecting) {
-              observer.unobserve(entry[target]);
-              dispatch(entry[target], '', createEvent<QwikVisibleEvent>(qvisible, entry));
+              observer.unobserve(entry.target);
+              dispatch(entry.target, '', createEvent<QwikVisibleEvent>('qvisible', entry));
             }
           }
         });
-        results[forEach]((el) => observer.observe(el));
+        results.forEach((el) => observer.observe(el));
       }
     }
   };
@@ -270,9 +261,9 @@ export const qwikLoader = (
     }
   };
 
-  if (!(Q_CONTEXT in doc)) {
+  if (!('__q_context__' in doc)) {
     // Mark qwik-loader presence but falsy
-    doc[Q_CONTEXT] = 0;
+    doc.__q_context__ = 0;
     const qwikevents = win.qwikevents;
     // If `qwikEvents` is an array, process it.
     if (Array.isArray(qwikevents)) {
@@ -287,8 +278,4 @@ export const qwikLoader = (
     addEventListener(doc, 'readystatechange', processReadyStateChange);
     processReadyStateChange();
   }
-};
-
-export interface QwikLoaderMessage extends MessageEvent {
-  data: string[];
-}
+})();

packages/qwik/src/qwikloader-prefetch.ts

@@ -0,0 +1,28 @@
+import { readFileSync } from 'fs';
+import { expect, test } from 'vitest';
+import compress from 'brotli/compress.js';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+test('qwikloader script', () => {
+  let qwikLoader: string = '';
+  try {
+    qwikLoader = readFileSync(resolve(__dirname, '../dist/qwikloader.js'), 'utf-8');
+  } catch {
+    // ignore, we didn't build yet
+  }
+  // This is to ensure we are deliberate about changes to qwikloader.
+  expect(qwikLoader.length).toBeGreaterThan(0);
+  /**
+   * Note that the source length can be shorter by using strings in variables and using those to
+   * dereference objects etc, but that actually results in worse compression
+   */
+  expect(qwikLoader.length).toBeLessThan(3127);
+  const compressed = compress(Buffer.from(qwikLoader), { mode: 1, quality: 11 });
+  expect(compressed.length).toBeLessThan(1429);
+  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()}})();"`
+  );
+});

packages/qwik/src/qwikloader.ts

@@ -80,7 +80,7 @@ export async function build(config: BuildConfig) {
       ]);
 
       // server bundling must happen after the results from the others
-      // because it inlines the qwik loader and prefetch scripts
+      // because it inlines the qwik loader
       await Promise.all([submoduleServer(config), submoduleOptimizer(config)]);
     }