perf(qwikcity): remove qwikcity plan dyn imports from bundlegraph

Author: wmertens

packages/qwik-city/src/buildtime/vite/get-route-imports.ts

@@ -1,9 +1,10 @@
 import type { QwikBundle, QwikManifest } from '@builder.io/qwik/optimizer';
 import { removeExtension } from '../../utils/fs';
 import type { BuildRoute } from '../types';
+import { QWIK_CITY_PLAN_ID } from './plugin';
 
 export function getRouteImports(routes: BuildRoute[], manifest: QwikManifest) {
-  const result: Record<string, { imports?: string[] }> = {};
+  const result: Record<string, { imports?: string[]; dynamicImports?: string[] }> = {};
   routes.forEach((route) => {
     const routePath = removeExtension(route.filePath);
     const layoutPaths = route.layouts
@@ -22,6 +23,15 @@ export function getRouteImports(routes: BuildRoute[], manifest: QwikManifest) {
       result[route.routeName] = { imports };
     }
   });
+  for (const bundleName of Object.keys(manifest.bundles)) {
+    const bundle = manifest.bundles[bundleName];
+    if (bundle.origins?.some((s) => s.endsWith(QWIK_CITY_PLAN_ID))) {
+      // Don't consider the city plan for preloading
+      // we keep imports because something might be bundled with it
+      result[bundleName] = { imports: bundle.imports, dynamicImports: [] };
+      break;
+    }
+  }
   return result;
 }
 

packages/qwik-city/src/buildtime/vite/get-route-imports.unit.ts

@@ -29,6 +29,10 @@ describe('modifyBundleGraph', () => {
           size: 0,
           origins: ['src/routes/layout.tsx'],
         },
+        'q-city-plan.js': {
+          size: 0,
+          origins: ['@qwik-city-plan'],
+        },
       } as Record<string, QwikBundle>,
     } as QwikManifest;
 
@@ -62,6 +66,10 @@ describe('modifyBundleGraph', () => {
             "fake-bundle-part-of-layout.js",
           ],
         },
+        "q-city-plan.js": {
+          "dynamicImports": [],
+          "imports": undefined,
+        },
       }
     `);
   });

packages/qwik-city/src/buildtime/vite/plugin.ts

@@ -315,7 +315,7 @@ function qwikCityPlugin(userOpts?: QwikCityVitePluginOptions): any {
 }
 
 const QWIK_SERIALIZER = '@qwik-serializer';
-const QWIK_CITY_PLAN_ID = '@qwik-city-plan';
+export const QWIK_CITY_PLAN_ID = '@qwik-city-plan';
 const QWIK_CITY_ENTRIES_ID = '@qwik-city-entries';
 const QWIK_CITY = '@builder.io/qwik-city';
 const QWIK_CITY_SW_REGISTER = '@qwik-city-sw-register';

packages/qwik/src/optimizer/src/plugins/bundle-graph.ts

@@ -112,9 +112,8 @@ export function convertManifestToBundleGraph(
     for (const depName of dynDeps) {
       clearTransitiveDeps(dynDeps, depName);
     }
-    // If we have a lot of dynamic imports, we don't know which ones are needed, so we don't add any
-    // This can happen with registry bundles like for routing
-    if (dynDeps.size > 0 && dynDeps.size < 10) {
+    if (dynDeps.size > 0) {
+      // We rely on the Set keeping the items in order, everything after this is dynamic
       deps.add(dynamicTag);
       for (const depName of dynDeps) {
         deps.add(depName);