type(fix)

Addressing Alans concerns and removing the function and keeping the bundles separate

Author: tsteuwer-accesso

packages/angular/build/src/builders/application/chunk-optimizer.ts

@@ -285,6 +285,21 @@ export async function optimizeChunks(
   }
   original.metafile = newMetafile;
 
+  // Update the isolated browser metafile to reflect the optimized output.
+  // Server outputs are excluded since chunk optimization only affects browser bundles.
+  const serverOutputPaths = new Set(Object.keys(original.serverMetafile?.outputs ?? {}));
+  const browserOutputs: Metafile['outputs'] = {};
+  const browserInputs: Metafile['inputs'] = {};
+  for (const [path, output] of Object.entries(newMetafile.outputs)) {
+    if (!serverOutputPaths.has(path)) {
+      browserOutputs[path] = output;
+      for (const inputPath of Object.keys(output.inputs)) {
+        browserInputs[inputPath] = newMetafile.inputs[inputPath];
+      }
+    }
+  }
+  original.browserMetafile = { inputs: browserInputs, outputs: browserOutputs };
+
   // Remove used chunks and associated sourcemaps from the original result
   original.outputFiles = original.outputFiles.filter(
     (file) =>

packages/angular/build/src/builders/application/execute-build.ts

@@ -7,20 +7,21 @@
  */
 
 import { BuilderContext } from '@angular-devkit/architect';
+import type { Metafile } from 'esbuild';
 import { createAngularCompilation } from '../../tools/angular/compilation';
 import { SourceFileCache } from '../../tools/esbuild/angular/source-file-cache';
 import { generateBudgetStats } from '../../tools/esbuild/budget-stats';
 import {
   BuildOutputFileType,
   BundleContextResult,
   BundlerContext,
+  InitialFileRecord,
 } from '../../tools/esbuild/bundler-context';
 import { ExecutionResult, RebuildState } from '../../tools/esbuild/bundler-execution-result';
 import { checkCommonJSModules } from '../../tools/esbuild/commonjs-checker';
 import { extractLicenses } from '../../tools/esbuild/license-extractor';
 import { profileAsync } from '../../tools/esbuild/profiling';
 import {
-  buildMetafileForType,
   calculateEstimatedTransferSizes,
   logBuildStats,
   transformSupportedBrowsersToTargets,
@@ -38,6 +39,32 @@ import { inlineI18n, loadActiveTranslations } from './i18n';
 import { NormalizedApplicationBuildOptions } from './options';
 import { createComponentStyleBundler, setupBundlerContexts } from './setup-bundling';
 
+function filterMetafileByInitialFiles(
+  metafile: Metafile,
+  initialFiles: Map<string, InitialFileRecord>,
+): Metafile {
+  const filteredOutputs: Metafile['outputs'] = {};
+  const referencedInputs = new Set<string>();
+
+  for (const [path, output] of Object.entries(metafile.outputs)) {
+    if (initialFiles.has(path)) {
+      filteredOutputs[path] = output;
+      for (const inputPath of Object.keys(output.inputs)) {
+        referencedInputs.add(inputPath);
+      }
+    }
+  }
+
+  const filteredInputs: Metafile['inputs'] = {};
+  for (const [inputPath, input] of Object.entries(metafile.inputs)) {
+    if (referencedInputs.has(inputPath)) {
+      filteredInputs[inputPath] = input;
+    }
+  }
+
+  return { inputs: filteredInputs, outputs: filteredOutputs };
+}
+
 // eslint-disable-next-line max-lines-per-function
 export async function executeBuild(
   options: NormalizedApplicationBuildOptions,
@@ -210,7 +237,7 @@ export async function executeBuild(
     executionResult.setExternalMetadata(implicitBrowser, implicitServer, [...explicitExternal]);
   }
 
-  const { metafile, initialFiles, outputFiles } = bundlingResult;
+  const { metafile, browserMetafile, serverMetafile, initialFiles, outputFiles } = bundlingResult;
 
   executionResult.outputFiles.push(...outputFiles);
 
@@ -308,31 +335,23 @@ export async function executeBuild(
   if (options.stats) {
     executionResult.addOutputFile(
       'browser-stats.json',
-      JSON.stringify(buildMetafileForType(metafile, 'browser', false, outputFiles), null, 2),
+      JSON.stringify(browserMetafile, null, 2),
       BuildOutputFileType.Root,
     );
     executionResult.addOutputFile(
       'browser-initial-stats.json',
-      JSON.stringify(
-        buildMetafileForType(metafile, 'browser', true, outputFiles, initialFiles),
-        null,
-        2,
-      ),
+      JSON.stringify(filterMetafileByInitialFiles(browserMetafile, initialFiles), null, 2),
       BuildOutputFileType.Root,
     );
-    if (ssrOutputEnabled) {
+    if (ssrOutputEnabled && serverMetafile) {
       executionResult.addOutputFile(
         'server-stats.json',
-        JSON.stringify(buildMetafileForType(metafile, 'server', false, outputFiles), null, 2),
+        JSON.stringify(serverMetafile, null, 2),
         BuildOutputFileType.Root,
       );
       executionResult.addOutputFile(
         'server-initial-stats.json',
-        JSON.stringify(
-          buildMetafileForType(metafile, 'server', true, outputFiles, initialFiles),
-          null,
-          2,
-        ),
+        JSON.stringify(filterMetafileByInitialFiles(serverMetafile, initialFiles), null, 2),
         BuildOutputFileType.Root,
       );
     }

packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts

@@ -278,6 +278,7 @@ export class ComponentStylesheetBundler {
       contents,
       outputFiles,
       metafile,
+      browserMetafile: metafile,
       referencedFiles,
       externalImports: result.externalImports,
       initialFiles: new Map(),

packages/angular/build/src/tools/esbuild/bundler-context.ts

@@ -29,6 +29,8 @@ export type BundleContextResult =
       errors: undefined;
       warnings: Message[];
       metafile: Metafile;
+      browserMetafile: Metafile;
+      serverMetafile?: Metafile;
       outputFiles: BuildOutputFile[];
       initialFiles: Map<string, InitialFileRecord>;
       externalImports: {
@@ -128,6 +130,8 @@ export class BundlerContext {
     let errors: Message[] | undefined;
     const warnings: Message[] = [];
     const metafile: Metafile = { inputs: {}, outputs: {} };
+    const browserMetafile: Metafile = { inputs: {}, outputs: {} };
+    let serverMetafile: Metafile | undefined;
     const initialFiles = new Map<string, InitialFileRecord>();
     const externalImportsBrowser = new Set<string>();
     const externalImportsServer = new Set<string>();
@@ -148,6 +152,17 @@ export class BundlerContext {
         Object.assign(metafile.outputs, result.metafile.outputs);
       }
 
+      // Keep browser and server metafiles isolated for separate stats output
+      if (result.browserMetafile) {
+        Object.assign(browserMetafile.inputs, result.browserMetafile.inputs);
+        Object.assign(browserMetafile.outputs, result.browserMetafile.outputs);
+      }
+      if (result.serverMetafile) {
+        serverMetafile ??= { inputs: {}, outputs: {} };
+        Object.assign(serverMetafile.inputs, result.serverMetafile.inputs);
+        Object.assign(serverMetafile.outputs, result.serverMetafile.outputs);
+      }
+
       result.initialFiles.forEach((value, key) => initialFiles.set(key, value));
 
       outputFiles.push(...result.outputFiles);
@@ -170,6 +185,8 @@ export class BundlerContext {
       errors,
       warnings,
       metafile,
+      browserMetafile,
+      serverMetafile,
       initialFiles,
       outputFiles,
       externalImports: {
@@ -415,6 +432,8 @@ export class BundlerContext {
       },
       externalConfiguration,
       errors: undefined,
+      browserMetafile: isPlatformServer ? { inputs: {}, outputs: {} } : result.metafile,
+      serverMetafile: isPlatformServer ? result.metafile : undefined,
     };
   }
 

packages/angular/build/src/tools/esbuild/utils.ts

@@ -29,58 +29,6 @@ import {
   PrerenderedRoutesRecord,
 } from './bundler-execution-result';
 
-export function buildMetafileForType(
-  metafile: Metafile,
-  type: 'browser' | 'server',
-  initial: boolean,
-  outputFiles: BuildOutputFile[],
-  initialFiles?: Map<string, InitialFileRecord>,
-): Metafile {
-  const isServer = type === 'server';
-
-  const outputPathsForType = new Set(
-    outputFiles
-      .filter(({ type: fileType }) => {
-        const isServerFile =
-          fileType === BuildOutputFileType.ServerApplication ||
-          fileType === BuildOutputFileType.ServerRoot;
-
-        return isServer ? isServerFile : !isServerFile;
-      })
-      .map(({ path }) => path),
-  );
-
-  const filteredOutputs: Metafile['outputs'] = {};
-  for (const [outputPath, output] of Object.entries(metafile.outputs)) {
-    if (!outputPathsForType.has(outputPath)) {
-      continue;
-    }
-    if (initial && !initialFiles?.has(outputPath)) {
-      continue;
-    }
-    filteredOutputs[outputPath] = output;
-  }
-
-  const referencedInputs = new Set<string>();
-  for (const output of Object.values(filteredOutputs)) {
-    for (const inputPath of Object.keys(output.inputs)) {
-      referencedInputs.add(inputPath);
-    }
-  }
-
-  const filteredInputs: Metafile['inputs'] = {};
-  for (const [inputPath, input] of Object.entries(metafile.inputs)) {
-    if (referencedInputs.has(inputPath)) {
-      filteredInputs[inputPath] = input;
-    }
-  }
-
-  return {
-    inputs: filteredInputs,
-    outputs: filteredOutputs,
-  };
-}
-
 export function logBuildStats(
   metafile: Metafile,
   outputFiles: BuildOutputFile[],