perf(qwikloader): put qwikloader in a separate chunk

this doesn't impact LCP and reduces download size

Author: wmertens

packages/qwik/src/optimizer/src/manifest.ts

@@ -475,6 +475,10 @@ export function generateManifestFromBundles(
         manifest.preloader = bundleFileName;
       } else if (modulePaths.some((m) => /[/\\]qwik[/\\]dist[/\\]core\.[^/]*js$/.test(m))) {
         manifest.core = bundleFileName;
+      } else if (
+        modulePaths.some((m) => /[/\\]qwik[/\\]dist[/\\]qwikloader(\.debug)?\.[^/]*js$/.test(m))
+      ) {
+        manifest.qwikLoader = bundleFileName;
       }
     }
 

packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -405,6 +405,19 @@ export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
     debug(`transformedOutputs.clear()`);
     clientTransformedOutputs.clear();
     serverTransformedOutputs.clear();
+
+    if (opts.target === 'client') {
+      const ql = await _ctx.resolve('@builder.io/qwik/qwikloader.js', undefined, {
+        skipSelf: true,
+      });
+      if (ql) {
+        _ctx.emitFile({
+          id: ql.id,
+          type: 'chunk',
+          preserveSignature: 'allow-extension',
+        });
+      }
+    }
   };
 
   const getIsServer = (viteOpts?: { ssr?: boolean }) => {
@@ -869,6 +882,7 @@ export const isDev = ${JSON.stringify(isDev)};
         mapping: manifest.mapping,
         preloader: manifest.preloader,
         core: manifest.core,
+        qwikLoader: manifest.qwikLoader,
       };
     }
     return `// @qwik-client-manifest
@@ -907,11 +921,12 @@ export const manifest = ${JSON.stringify(serverManifest)};\n`;
   function manualChunks(id: string, { getModuleInfo }: Rollup.ManualChunkMeta) {
     // The preloader has to stay in a separate chunk if it's a client build
     // the vite preload helper must be included or to prevent breaking circular dependencies
-    if (
-      opts.target === 'client' &&
-      (id.endsWith(QWIK_PRELOADER_REAL_ID) || id === '\0vite/preload-helper.js')
-    ) {
-      return 'qwik-preloader';
+    if (opts.target === 'client') {
+      if (id.endsWith(QWIK_PRELOADER_REAL_ID) || id === '\0vite/preload-helper.js') {
+        return 'qwik-preloader';
+      } else if (/qwik[\\/]dist[\\/]qwikloader\.js$/.test(id)) {
+        return 'qwik-loader';
+      }
     }
 
     const module = getModuleInfo(id)!;

packages/qwik/src/optimizer/src/types.ts

@@ -229,6 +229,8 @@ export interface QwikManifest {
   preloader?: string;
   /** The Qwik core bundle fileName */
   core?: string;
+  /** The Qwik loader bundle fileName */
+  qwikLoader?: string;
   /** CSS etc to inject in the document head */
   injections?: GlobalInjections[];
   /** The version of the manifest */
@@ -249,7 +251,7 @@ export interface QwikManifest {
  */
 export type ServerQwikManifest = Pick<
   QwikManifest,
-  'manifestHash' | 'injections' | 'bundleGraph' | 'mapping' | 'preloader' | 'core'
+  'manifestHash' | 'injections' | 'bundleGraph' | 'mapping' | 'preloader' | 'core' | 'qwikLoader'
 >;
 
 /**

packages/qwik/src/server/render.ts

@@ -133,22 +133,25 @@ export async function renderToStream(
 
   const includeMode = opts.qwikLoader?.include ?? 'auto';
   const positionMode = opts.qwikLoader?.position ?? 'bottom';
+  const qwikLoaderChunk = resolvedManifest?.manifest.qwikLoader;
   let didAddQwikLoader = false;
-  if (positionMode === 'top' && includeMode !== 'never') {
-    didAddQwikLoader = true;
-    const qwikLoaderScript = getQwikLoaderScript({
-      debug: opts.debug,
-    });
-    beforeContent.push(
+  if (includeMode !== 'never' && qwikLoaderChunk) {
+    beforeContent.unshift(
+      jsx('link', { rel: 'modulepreload', href: `${buildBase}${qwikLoaderChunk}` }),
       jsx('script', {
-        id: 'qwikloader',
-        dangerouslySetInnerHTML: qwikLoaderScript,
+        type: 'module',
+        async: true,
+        src: `${buildBase}${qwikLoaderChunk}`,
       })
     );
+    didAddQwikLoader = true;
+  }
+  if (positionMode === 'top') {
     // Assume there will be at least click and input handlers
     beforeContent.push(
       jsx('script', {
-        dangerouslySetInnerHTML: `window.qwikevents.push('click','input')`,
+        // not all ESM browsers support ||=
+        dangerouslySetInnerHTML: `(window.qwikevents||window.qwikevents=[]).push('click','input')`,
       })
     );
   }
@@ -195,9 +198,9 @@ export async function renderToStream(
         );
       }
 
-      const needLoader = !didAddQwikLoader && (!snapshotResult || snapshotResult.mode !== 'static');
+      const needLoader = !snapshotResult || snapshotResult.mode !== 'static';
       const includeLoader = includeMode === 'always' || (includeMode === 'auto' && needLoader);
-      if (includeLoader) {
+      if (!didAddQwikLoader && includeLoader) {
         const qwikLoaderScript = getQwikLoaderScript({
           debug: opts.debug,
         });
@@ -213,9 +216,7 @@ export async function renderToStream(
       // We emit the events separately so other qwikloaders can see them
       const extraListeners = Array.from(containerState.$events$, (s) => JSON.stringify(s));
       if (extraListeners.length > 0) {
-        const content =
-          (includeLoader ? `window.qwikevents` : `(window.qwikevents||=[])`) +
-          `.push(${extraListeners.join(', ')})`;
+        const content = `(window.qwikevents||window.qwikevents=[]).push(${extraListeners.join(',')})`;
         children.push(
           jsx('script', {
             dangerouslySetInnerHTML: content,