perf(insights): better minify/compress

Author: wmertens

packages/qwik/src/insights/insights.ts

@@ -82,123 +82,93 @@ interface QSymbolDetail {
 
 // We use a self-invoking function to minify the code, renaming long globals and attributes
 // the qwik optimizer only minifies somewhat, so put all var declarations in the same line
-const insightsPing = sync$(() =>
-  ((
-    window: QwikSymbolTrackerWindow,
-    document,
-    location,
-    navigator,
-    performance,
-    round,
-    JSON_stringify
-  ) => {
+/** @internal */
+export const insightsPing = sync$(() =>
+  ((w: QwikSymbolTrackerWindow, d, l, n, p, r, S) => {
     /* eslint-disable no-var -- better minification */
     var publicApiKey = __QI_KEY__,
       postUrl = __QI_URL__,
-      getAttribute_s = 'getAttribute' as const,
-      querySelector_s = 'querySelector' as const,
-      manifest_s = 'manifest' as const,
-      manifest_hash_s = `${manifest_s}-hash` as const,
-      manifestHash_s = `${manifest_s}Hash` as const,
-      version_s = 'version' as const,
-      publicApiKey_s = 'publicApiKey' as const,
-      sendBeacon_s = 'sendBeacon' as const,
-      symbol_s = 'symbol' as const,
-      length_s = 'length' as const,
-      addEventListener_s = 'addEventListener' as const,
-      route_s = 'route' as const,
-      error_s = 'error' as const,
-      stack_s = 'stack' as const,
-      message_s = 'message' as const,
-      symbols_s = `${symbol_s}s` as const,
-      qVersion =
-        document[querySelector_s](`[q\\:${version_s}]`)?.[getAttribute_s](`q:${version_s}`) ||
-        'unknown',
+      qVersion = d.querySelector(`[q\\:version]`)?.getAttribute(`q:version`) || 'unknown',
       manifestHash =
-        document[querySelector_s](`[q\\:${manifest_hash_s}]`)?.[getAttribute_s](
-          `q:${manifest_hash_s}`
-        ) || 'dev',
+        d.querySelector(`[q\\:manifest-hash]`)?.getAttribute(`q:manifest-hash`) || 'dev',
       qSymbols: InsightSymbol[] = [],
       existingSymbols: Set<string> = new Set(),
       flushSymbolIndex: number = 0,
       lastReqTime: number = 0,
       timeoutID: ReturnType<typeof setTimeout> | undefined,
-      qRouteChangeTime = performance.now(),
-      qRouteEl = document[querySelector_s](`[q\\:${route_s}]`),
+      qRouteChangeTime = p.now(),
+      qRouteEl = d.querySelector(`[q\\:route]`),
       flush = () => {
         timeoutID = undefined;
-        if (qSymbols[length_s] > flushSymbolIndex) {
+        if (qSymbols.length > flushSymbolIndex) {
           var payload = {
             qVersion,
-            [publicApiKey_s]: publicApiKey,
-            [manifestHash_s]: manifestHash,
+            publicApiKey,
+            manifestHash,
             previousSymbol:
-              flushSymbolIndex == 0 ? undefined : qSymbols[flushSymbolIndex - 1][symbol_s],
-            [symbols_s]: qSymbols.slice(flushSymbolIndex),
+              flushSymbolIndex == 0 ? undefined : qSymbols[flushSymbolIndex - 1].symbol,
+            symbols: qSymbols.slice(flushSymbolIndex),
           } satisfies InsightsPayload;
-          navigator[sendBeacon_s](postUrl, JSON_stringify(payload));
-          flushSymbolIndex = qSymbols[length_s];
+          n.sendBeacon(postUrl, S(payload));
+          flushSymbolIndex = qSymbols.length;
         }
       },
       debounceFlush = () => {
         timeoutID != undefined && clearTimeout(timeoutID);
         timeoutID = setTimeout(flush, 1000);
       };
 
-    window.qSymbolTracker = {
-      [symbols_s]: qSymbols,
-      [publicApiKey_s]: publicApiKey,
+    w.qSymbolTracker = {
+      symbols: qSymbols,
+      publicApiKey,
     };
     if (qRouteEl) {
       new MutationObserver((mutations) => {
-        var mutation = mutations.find((m) => m.attributeName === `q:${route_s}`);
+        var mutation = mutations.find((m) => m.attributeName === `q:route`);
         if (mutation) {
-          qRouteChangeTime = performance.now();
+          qRouteChangeTime = p.now();
         }
       }).observe(qRouteEl, { attributes: true });
     }
-    document[addEventListener_s](
-      'visibilitychange',
-      () => document.visibilityState === 'hidden' && flush()
-    );
-    document[addEventListener_s](`q${symbol_s}`, (_event) => {
+    d.addEventListener('visibilitychange', () => d.visibilityState === 'hidden' && flush());
+    d.addEventListener(`qsymbol`, (_event) => {
       var event = _event as CustomEvent<QSymbolDetail>,
         detail = event.detail,
         symbolRequestTime = detail.reqTime,
         symbolDeliveredTime = event.timeStamp,
-        symbol = detail[symbol_s];
+        symbol = detail.symbol;
       if (!existingSymbols.has(symbol)) {
         existingSymbols.add(symbol);
-        var route = qRouteEl?.[getAttribute_s](`q:${route_s}`) || '/';
+        var route = qRouteEl?.getAttribute(`q:route`) || '/';
         qSymbols.push({
-          [symbol_s]: symbol,
-          [route_s]: route,
-          delay: round(0 - lastReqTime + symbolRequestTime),
-          latency: round(symbolDeliveredTime - symbolRequestTime),
-          timeline: round(0 - qRouteChangeTime + symbolRequestTime),
+          symbol,
+          route,
+          delay: r(0 - lastReqTime + symbolRequestTime),
+          latency: r(symbolDeliveredTime - symbolRequestTime),
+          timeline: r(0 - qRouteChangeTime + symbolRequestTime),
           interaction: !!detail.element,
         });
         lastReqTime = symbolDeliveredTime;
         debounceFlush();
       }
     });
-    window[addEventListener_s](error_s, (event: ErrorEvent) => {
-      var error = event[error_s];
+    w.addEventListener('error', (event: ErrorEvent) => {
+      var error = event.error;
       if (!(error && typeof error === 'object')) {
         return;
       }
       var payload = {
-        url: `${location}`,
-        [manifestHash_s]: manifestHash,
+        url: `${l}`,
+        manifestHash,
         timestamp: new Date().getTime(),
         source: event.filename,
         line: event.lineno,
         column: event.colno,
-        [message_s]: event[message_s],
-        [error_s]: message_s in error ? (error as Error)[message_s] : `${error}`,
-        [stack_s]: stack_s in error ? (error as Error)[stack_s] || '' : '',
+        message: event.message,
+        error: 'message' in error ? (error as Error).message : `${error}`,
+        stack: 'stack' in error ? (error as Error).stack || '' : '',
       } satisfies InsightsError;
-      navigator[sendBeacon_s](`${postUrl}${error_s}/`, JSON_stringify(payload));
+      n.sendBeacon(`${postUrl}error/`, S(payload));
     });
   })(window as any, document, location, navigator, performance, Math.round, JSON.stringify)
 );

packages/qwik/src/insights/insights.unit.ts

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest';
+import { insightsPing } from './insights';
+import compress from 'brotli/compress.js';
+
+test('insightsPing size', () => {
+  const pingSrc = (insightsPing as any).resolved.serialized;
+  const compressed = compress(Buffer.from(pingSrc), { mode: 1, quality: 11 });
+
+  expect(compressed.length).toBe(792);
+  expect(pingSrc.length).toBe(2099);
+  // Just to a sanity check
+  expect(pingSrc).toMatchInlineSnapshot(
+    `"()=>((w,d,l,n,p,r,S)=>{var publicApiKey=__QI_KEY__,postUrl=__QI_URL__,qVersion=d.querySelector(\`[q\\\\:version]\`)?.getAttribute(\`q:version\`)||"unknown",manifestHash=d.querySelector(\`[q\\\\:manifest-hash]\`)?.getAttribute(\`q:manifest-hash\`)||"dev",qSymbols=[],existingSymbols=new Set,flushSymbolIndex=0,lastReqTime=0,timeoutID,qRouteChangeTime=p.now(),qRouteEl=d.querySelector(\`[q\\\\:route]\`),flush=()=>{timeoutID=undefined;if(qSymbols.length>flushSymbolIndex){var payload={qVersion,publicApiKey,manifestHash,previousSymbol:flushSymbolIndex==0?undefined:qSymbols[flushSymbolIndex-1].symbol,symbols:qSymbols.slice(flushSymbolIndex)};n.sendBeacon(postUrl,S(payload));flushSymbolIndex=qSymbols.length;}},debounceFlush=()=>{timeoutID!=undefined&&clearTimeout(timeoutID);timeoutID=setTimeout(flush,1e3);};w.qSymbolTracker={symbols:qSymbols,publicApiKey};if(qRouteEl){new MutationObserver(mutations=>{var mutation=mutations.find(m=>m.attributeName===\`q:route\`);if(mutation){qRouteChangeTime=p.now();}}).observe(qRouteEl,{attributes:true});}d.addEventListener("visibilitychange",()=>d.visibilityState==="hidden"&&flush());d.addEventListener(\`qsymbol\`,_event=>{var event=_event,detail=event.detail,symbolRequestTime=detail.reqTime,symbolDeliveredTime=event.timeStamp,symbol=detail.symbol;if(!existingSymbols.has(symbol)){existingSymbols.add(symbol);var route=qRouteEl?.getAttribute(\`q:route\`)||"/";qSymbols.push({symbol,route,delay:r(0-lastReqTime+symbolRequestTime),latency:r(symbolDeliveredTime-symbolRequestTime),timeline:r(0-qRouteChangeTime+symbolRequestTime),interaction:!!detail.element});lastReqTime=symbolDeliveredTime;debounceFlush();}});w.addEventListener("error",event=>{var error=event.error;if(!(error&&typeof error==="object")){return;}var payload={url:\`\${l}\`,manifestHash,timestamp:new Date().getTime(),source:event.filename,line:event.lineno,column:event.colno,message:event.message,error:"message"in error?error.message:\`\${error}\`,stack:"stack"in error?error.stack||"":""};n.sendBeacon(\`\${postUrl}error/\`,S(payload));});})(window,document,location,navigator,performance,Math.round,JSON.stringify)"`
+  );
+});

packages/qwik/src/insights/qwik.insights.api.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { Component } from '@qwik.dev/core';
+import { SyncQRL } from '@qwik.dev/core';
 
 // @beta (undocumented)
 export const Insights: Component<    {
@@ -42,6 +43,11 @@ export interface InsightsPayload {
     symbols: InsightSymbol[];
 }
 
+// Warning: (ae-internal-missing-underscore) The name "insightsPing" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const insightsPing: SyncQRL<() => void>;
+
 // @public (undocumented)
 export interface InsightSymbol {
     delay: number;

scripts/submodule-insights.ts

@@ -23,7 +23,7 @@ async function buildComponents(config: BuildConfig) {
       outDir: distBase,
       emptyOutDir: false,
       target: 'es2020',
-      minify: false,
+      minify: true,
       rollupOptions: {
         external: (id) => /^(@|node:)/i.test(id),
       },