Updating per code review instructions and adding more unit tests

tsteuwer-accesso · tsteuwer-accesso · commit 72ef689ddcbc · 2026-04-13T10:26:50.000-04:00
diff --git a/packages/angular/build/src/builders/application/chunk-optimizer.ts b/packages/angular/build/src/builders/application/chunk-optimizer.ts
@@ -26,7 +26,7 @@ import {
   BundleContextResult,
   InitialFileRecord,
 } from '../../tools/esbuild/bundler-context';
-import { createOutputFile } from '../../tools/esbuild/utils';
+import { createOutputFile, filterMetafile } from '../../tools/esbuild/utils';
 import { assertIsError } from '../../utils/error';
 
 /**
@@ -288,17 +288,7 @@ export async function optimizeChunks(
   // 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 };
+  original.browserMetafile = filterMetafile(newMetafile, (path) => !serverOutputPaths.has(path));
 
   // Remove used chunks and associated sourcemaps from the original result
   original.outputFiles = original.outputFiles.filter(
diff --git a/packages/angular/build/src/builders/application/execute-build.ts b/packages/angular/build/src/builders/application/execute-build.ts
@@ -7,22 +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 {
   calculateEstimatedTransferSizes,
+  filterMetafile,
   logBuildStats,
   transformSupportedBrowsersToTargets,
 } from '../../tools/esbuild/utils';
@@ -39,32 +38,6 @@ 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,
@@ -335,23 +308,39 @@ export async function executeBuild(
   if (options.stats) {
     executionResult.addOutputFile(
       'browser-stats.json',
-      JSON.stringify(browserMetafile, null, 2),
+      JSON.stringify(
+        filterMetafile(browserMetafile, (path) => !initialFiles.has(path)),
+        null,
+        2,
+      ),
       BuildOutputFileType.Root,
     );
     executionResult.addOutputFile(
       'browser-initial-stats.json',
-      JSON.stringify(filterMetafileByInitialFiles(browserMetafile, initialFiles), null, 2),
+      JSON.stringify(
+        filterMetafile(browserMetafile, (path) => initialFiles.has(path)),
+        null,
+        2,
+      ),
       BuildOutputFileType.Root,
     );
     if (ssrOutputEnabled && serverMetafile) {
       executionResult.addOutputFile(
         'server-stats.json',
-        JSON.stringify(serverMetafile, null, 2),
+        JSON.stringify(
+          filterMetafile(serverMetafile, (path) => !initialFiles.has(path)),
+          null,
+          2,
+        ),
         BuildOutputFileType.Root,
       );
       executionResult.addOutputFile(
         'server-initial-stats.json',
-        JSON.stringify(filterMetafileByInitialFiles(serverMetafile, initialFiles), null, 2),
+        JSON.stringify(
+          filterMetafile(serverMetafile, (path) => initialFiles.has(path)),
+          null,
+          2,
+        ),
         BuildOutputFileType.Root,
       );
     }
diff --git a/packages/angular/build/src/tools/esbuild/utils.ts b/packages/angular/build/src/tools/esbuild/utils.ts
@@ -29,6 +29,40 @@ import {
   PrerenderedRoutesRecord,
 } from './bundler-execution-result';
 
+/**
+ * Filters an esbuild metafile to only include outputs matching a given predicate,
+ * along with the inputs referenced by those outputs.
+ * @param metafile The esbuild metafile to filter.
+ * @param predicate A function that receives an output path and returns `true` if the output
+ *   should be included.
+ * @returns A new metafile containing only the matching outputs and their referenced inputs.
+ */
+export function filterMetafile(
+  metafile: Metafile,
+  predicate: (outputPath: string) => boolean,
+): Metafile {
+  const filteredOutputs: Metafile['outputs'] = {};
+  const referencedInputs = new Set<string>();
+
+  for (const [path, output] of Object.entries(metafile.outputs)) {
+    if (predicate(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 };
+}
+
 export function logBuildStats(
   metafile: Metafile,
   outputFiles: BuildOutputFile[],
diff --git a/packages/angular_devkit/build_angular/src/builders/browser/tests/options/stats-json_spec.ts b/packages/angular_devkit/build_angular/src/builders/browser/tests/options/stats-json_spec.ts
@@ -57,6 +57,67 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
       }
     });
 
+    it('browser-initial-stats.json contains only initial chunks', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        statsJson: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      const raw = harness.readFile('dist/browser-initial-stats.json');
+      const stats = JSON.parse(raw) as { chunks?: { initial?: boolean }[] };
+
+      for (const chunk of stats.chunks ?? []) {
+        expect(chunk.initial)
+          .withContext('browser-initial-stats.json should only contain initial chunks')
+          .toBeTrue();
+      }
+    });
+
+    it('browser-stats.json contains only non-initial chunks', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        statsJson: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      const raw = harness.readFile('dist/browser-stats.json');
+      const stats = JSON.parse(raw) as { chunks?: { initial?: boolean }[] };
+
+      for (const chunk of stats.chunks ?? []) {
+        expect(chunk.initial)
+          .withContext('browser-stats.json should not contain initial chunks')
+          .toBeFalse();
+      }
+    });
+
+    it('browser-stats.json and browser-initial-stats.json chunks have no overlap', async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        statsJson: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      type StatsJson = { chunks?: { id?: number | string; initial?: boolean }[] };
+      const nonInitialStats = JSON.parse(harness.readFile('dist/browser-stats.json')) as StatsJson;
+      const initialStats = JSON.parse(
+        harness.readFile('dist/browser-initial-stats.json'),
+      ) as StatsJson;
+
+      const nonInitialIds = new Set((nonInitialStats.chunks ?? []).map((c) => c.id));
+      for (const chunk of initialStats.chunks ?? []) {
+        expect(nonInitialIds.has(chunk.id))
+          .withContext(`Chunk '${chunk.id}' should not appear in both stats files`)
+          .toBeFalse();
+      }
+    });
+
     it('does not generate a Webpack Stats file in output when false', async () => {
       harness.useTarget('build', {
         ...BASE_OPTIONS,
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts
@@ -243,10 +243,35 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
   }
 
   if (buildOptions.statsJson) {
+    const getInitialChunkIds = (data: import('webpack').StatsCompilation): Set<string | number> =>
+      new Set(
+        data.chunks?.filter((c) => c.initial).flatMap((c) => (c.id != null ? [c.id] : [])) ?? [],
+      );
+
     extraPlugins.push(
-      new JsonStatsPlugin(path.resolve(root, buildOptions.outputPath, 'browser-stats.json')),
+      new JsonStatsPlugin(
+        path.resolve(root, buildOptions.outputPath, 'browser-stats.json'),
+        (data) => {
+          const initialChunkIds = getInitialChunkIds(data);
+
+          return {
+            ...data,
+            chunks: data.chunks?.filter((c) => !c.initial),
+            assets: data.assets?.filter((a) => !a.chunks?.some((id) => initialChunkIds.has(id))),
+          };
+        },
+      ),
       new JsonStatsPlugin(
         path.resolve(root, buildOptions.outputPath, 'browser-initial-stats.json'),
+        (data) => {
+          const initialChunkIds = getInitialChunkIds(data);
+
+          return {
+            ...data,
+            chunks: data.chunks?.filter((c) => c.initial),
+            assets: data.assets?.filter((a) => a.chunks?.some((id) => initialChunkIds.has(id))),
+          };
+        },
       ),
     );
   }
diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/plugins/json-stats-plugin.ts b/packages/angular_devkit/build_angular/src/tools/webpack/plugins/json-stats-plugin.ts
@@ -10,17 +10,24 @@ import { createWriteStream } from 'node:fs';
 import { mkdir } from 'node:fs/promises';
 import { dirname } from 'node:path';
 import { pipeline } from 'node:stream/promises';
+import type { StatsCompilation } from 'webpack';
 import { Compiler } from 'webpack';
 import { assertIsError } from '../../../utils/error';
 import { addError } from '../../../utils/webpack-diagnostics';
 
 export class JsonStatsPlugin {
-  constructor(private readonly statsOutputPath: string) {}
+  constructor(
+    private readonly statsOutputPath: string,
+    private readonly transform?: (data: StatsCompilation) => StatsCompilation,
+  ) {}
 
   apply(compiler: Compiler) {
     compiler.hooks.done.tapPromise('angular-json-stats', async (stats) => {
       const { stringifyChunked } = await import('@discoveryjs/json-ext');
-      const data = stats.toJson('verbose');
+      let data = stats.toJson('verbose');
+      if (this.transform) {
+        data = this.transform(data);
+      }
 
       try {
         await mkdir(dirname(this.statsOutputPath), { recursive: true });
