perf(bundle-graph): only include segments for dynamic imports

If the dev wants to include other dynamic imports, they can just make a qrl()

Author: wmertens

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

@@ -406,7 +406,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface QwikBundle \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[dynamicImports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[hasSymbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[imports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[origins?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[size](#)\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[symbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface QwikBundle \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[dynamicImports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_ Dynamic imports\n\n\n</td></tr>\n<tr><td>\n\n[imports?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_ Direct imports\n\n\n</td></tr>\n<tr><td>\n\n[origins?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_ Source files of the bundle\n\n\n</td></tr>\n<tr><td>\n\n[size](#)\n\n\n</td><td>\n\n\n</td><td>\n\nnumber\n\n\n</td><td>\n\nSize of the bundle\n\n\n</td></tr>\n<tr><td>\n\n[symbols?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\\[\\]\n\n\n</td><td>\n\n_(Optional)_ Symbols in the bundle\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwikbundle.md"
     },
@@ -476,7 +476,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface QwikSymbol \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[canonicalFilename](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[captures](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxKind](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'function' \\| 'event'\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[displayName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[hash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[loc](#)\n\n\n</td><td>\n\n\n</td><td>\n\n\\[number, number\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[origin](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[parent](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface QwikSymbol \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[canonicalFilename](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[captures](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxKind](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'function' \\| 'eventHandler'\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[displayName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[hash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[loc](#)\n\n\n</td><td>\n\n\n</td><td>\n\n\\[number, number\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[origin](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[parent](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.qwiksymbol.md"
     },
@@ -608,7 +608,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface SegmentAnalysis \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[canonicalFilename](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[captures](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxKind](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'event' \\| 'function'\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[displayName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[entry](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[extension](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[hash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[loc](#)\n\n\n</td><td>\n\n\n</td><td>\n\n\\[number, number\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[name](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[origin](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[parent](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface SegmentAnalysis \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[canonicalFilename](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[captures](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxKind](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'eventHandler' \\| 'function'\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[ctxName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[displayName](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[entry](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[extension](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[hash](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[loc](#)\n\n\n</td><td>\n\n\n</td><td>\n\n\\[number, number\\]\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[name](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[origin](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[parent](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| null\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.segmentanalysis.md"
     },

packages/docs/src/routes/api/qwik-optimizer/index.md

@@ -1267,22 +1267,7 @@ string[]
 
 </td><td>
 
-_(Optional)_
-
-</td></tr>
-<tr><td>
-
-[hasSymbols?](#)
-
-</td><td>
-
-</td><td>
-
-boolean
-
-</td><td>
-
-_(Optional)_
+_(Optional)_ Dynamic imports
 
 </td></tr>
 <tr><td>
@@ -1297,7 +1282,7 @@ string[]
 
 </td><td>
 
-_(Optional)_
+_(Optional)_ Direct imports
 
 </td></tr>
 <tr><td>
@@ -1312,7 +1297,7 @@ string[]
 
 </td><td>
 
-_(Optional)_
+_(Optional)_ Source files of the bundle
 
 </td></tr>
 <tr><td>
@@ -1327,6 +1312,8 @@ number
 
 </td><td>
 
+Size of the bundle
+
 </td></tr>
 <tr><td>
 
@@ -1340,7 +1327,7 @@ string[]
 
 </td><td>
 
-_(Optional)_
+_(Optional)_ Symbols in the bundle
 
 </td></tr>
 </tbody></table>
@@ -1859,7 +1846,7 @@ boolean
 
 </td><td>
 
-'function' \| 'event'
+'function' \| 'eventHandler'
 
 </td><td>
 
@@ -2390,7 +2377,7 @@ boolean
 
 </td><td>
 
-'event' \| 'function'
+'eventHandler' \| 'function'
 
 </td><td>
 

packages/qwik/src/optimizer/src/api.md

@@ -167,17 +167,10 @@ export type QwikBuildTarget = 'client' | 'ssr' | 'lib' | 'test';
 
 // @public (undocumented)
 export interface QwikBundle {
-    // (undocumented)
     dynamicImports?: string[];
-    // (undocumented)
-    hasSymbols?: boolean;
-    // (undocumented)
     imports?: string[];
-    // (undocumented)
     origins?: string[];
-    // (undocumented)
     size: number;
-    // (undocumented)
     symbols?: string[];
 }
 
@@ -244,7 +237,7 @@ export interface QwikSymbol {
     // (undocumented)
     captures: boolean;
     // (undocumented)
-    ctxKind: 'function' | 'event';
+    ctxKind: 'function' | 'eventHandler';
     // (undocumented)
     ctxName: string;
     // (undocumented)
@@ -320,7 +313,7 @@ interface SegmentAnalysis {
     // (undocumented)
     captures: boolean;
     // (undocumented)
-    ctxKind: 'event' | 'function';
+    ctxKind: 'eventHandler' | 'function';
     // (undocumented)
     ctxName: string;
     // (undocumented)

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

@@ -15,15 +15,15 @@ function prioritizeSymbolNames(manifest: QwikManifest) {
     const b = symbols[symbolNameB];
 
     // events should sort highest
-    if (a.ctxKind === 'event' && b.ctxKind !== 'event') {
+    if (a.ctxKind === 'eventHandler' && b.ctxKind !== 'eventHandler') {
       return -1;
     }
-    if (a.ctxKind !== 'event' && b.ctxKind === 'event') {
+    if (a.ctxKind !== 'eventHandler' && b.ctxKind === 'eventHandler') {
       return 1;
     }
 
-    if (a.ctxKind === 'event' && b.ctxKind === 'event') {
-      // both are an event
+    if (a.ctxKind === 'eventHandler' && b.ctxKind === 'eventHandler') {
+      // both are an event handler
       const aIndex = EVENT_PRIORITY.indexOf(a.ctxName.toLowerCase());
       const bIndex = EVENT_PRIORITY.indexOf(b.ctxName.toLowerCase());
 
@@ -281,20 +281,15 @@ export function generateManifestFromBundles(
       size: outputBundle.code.length,
     };
 
-    let hasSymbols = false;
     for (const symbol of outputBundle.exports) {
       if (qrlNames.has(symbol)) {
         // When not minifying we see both the entry and the segment file
         // The segment file will only have 1 export, we want the entry
         if (!manifest.mapping[symbol] || outputBundle.exports.length !== 1) {
-          hasSymbols = true;
           manifest.mapping[symbol] = bundleFileName;
         }
       }
     }
-    if (hasSymbols) {
-      bundle.hasSymbols = true;
-    }
 
     const bundleImports = outputBundle.imports
       // Tree shaking might remove imports

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

@@ -54,13 +54,30 @@ export function convertManifestToBundleGraph(
     }
   }
 
+  // Filter out external and non-segment dynamic imports
+  for (const bundleName of Object.keys(graph)) {
+    const bundle = graph[bundleName];
+    const imports = bundle.imports?.filter((dep) => graph[dep]) || [];
+
+    // We only include dynamic imports that have qrl segments
+    // If the dev wants to include other dynamic imports, they can just make a qrl()
+    const dynamicImports = bundle.dynamicImports?.filter((dep) => graph[dep]?.hasSegments) || [];
+
+    // Overwrite so we don't mutate
+    graph[bundleName] = {
+      imports,
+      dynamicImports,
+      size: bundle.size,
+    };
+  }
+
   // Remove unused bundles
   const notUsed = new Set(Object.keys(graph));
   for (const bundleName of Object.keys(graph)) {
-    for (const dep of graph[bundleName].imports || []) {
+    for (const dep of graph[bundleName].imports!) {
       notUsed.delete(dep);
     }
-    for (const dep of graph[bundleName].dynamicImports || []) {
+    for (const dep of graph[bundleName].dynamicImports!) {
       notUsed.delete(dep);
     }
   }
@@ -79,11 +96,7 @@ export function convertManifestToBundleGraph(
     seen: Set<string> = new Set()
   ) => {
     const bundle = graph[bundleName];
-    if (!bundle) {
-      // external dependency
-      return;
-    }
-    for (const dep of bundle.imports || []) {
+    for (const dep of bundle.imports!) {
       if (parentDeps.has(dep)) {
         parentDeps.delete(dep);
       }
@@ -93,9 +106,6 @@ export function convertManifestToBundleGraph(
       }
     }
   };
-  const withoutExternalDependencies = (imports: string[] | undefined) => {
-    return imports?.filter((dep) => graph[dep]) || [];
-  };
 
   /**
    * First pass to collect minimal dependency lists and allocate space for dependencies. Minimal
@@ -104,11 +114,12 @@ export function convertManifestToBundleGraph(
    */
   for (const bundleName of names) {
     const bundle = graph[bundleName];
-    const deps = new Set(withoutExternalDependencies(bundle.imports));
+    // external dependencies are not included in `graph`
+    const deps = new Set(bundle.imports!);
     for (const depName of deps) {
       clearTransitiveDeps(deps, depName);
     }
-    const dynDeps = new Set(withoutExternalDependencies(bundle.dynamicImports));
+    const dynDeps = new Set(bundle.dynamicImports!);
     for (const depName of dynDeps) {
       clearTransitiveDeps(dynDeps, depName);
     }
@@ -130,11 +141,7 @@ export function convertManifestToBundleGraph(
 
   // Second pass to set the dependency indices
   for (const bundleName of names) {
-    const bundle = map.get(bundleName);
-    if (!bundle) {
-      console.warn(`Bundle ${bundleName} not found in the bundle graph.`);
-      continue;
-    }
+    const bundle = map.get(bundleName)!;
     // eslint-disable-next-line prefer-const
     let { index, deps } = bundle;
     index++;