feat(@angular/build): Support splitting browser and server stats json files for easier consumption

This feature supports splitting out the browser and server stats json files so it's easier to inspect the bundle in various analyzers. Today, everything gets dumped into a single file and it's nearly impossible to use without hours of fix -> remove unused browser chunks -> analyze and starting the loop all over again.

This feature implements the feature request I made in #28185, along with another developers request to see a stats json file for just the initial page bundle. I've tested this out in my own repository and it's already helped an incredible amount.

Fixes #28185 #28671

Author: tsteuwer-accesso

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

@@ -20,6 +20,7 @@ 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,
@@ -301,13 +302,22 @@ export async function executeBuild(
     BuildOutputFileType.Root,
   );
 
+  const ssrOutputEnabled: boolean = !!ssrOptions;
+
   // Write metafile if stats option is enabled
   if (options.stats) {
     executionResult.addOutputFile(
-      'stats.json',
-      JSON.stringify(metafile, null, 2),
+      'browser-stats.json',
+      JSON.stringify(buildMetafileForType(metafile, 'browser', outputFiles), null, 2),
       BuildOutputFileType.Root,
     );
+    if (ssrOutputEnabled) {
+      executionResult.addOutputFile(
+        'server-stats.json',
+        JSON.stringify(buildMetafileForType(metafile, 'server', outputFiles), null, 2),
+        BuildOutputFileType.Root,
+      );
+    }
   }
 
   if (!jsonLogs) {
@@ -322,7 +332,7 @@ export async function executeBuild(
         colors,
         changedFiles,
         estimatedTransferSizes,
-        !!ssrOptions,
+        ssrOutputEnabled,
         verbose,
       ),
     );

packages/angular/build/src/builders/application/schema.json

@@ -535,7 +535,7 @@
     },
     "statsJson": {
       "type": "boolean",
-      "description": "Generates a 'stats.json' file which can be analyzed with https://esbuild.github.io/analyze/.",
+      "description": "Generates a 'browser-stats.json' (and 'server-stats.json' when SSR is enabled) file which can be analyzed with https://esbuild.github.io/analyze/.",
       "default": false
     },
     "budgets": {

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

@@ -29,6 +29,50 @@ import {
   PrerenderedRoutesRecord,
 } from './bundler-execution-result';
 
+export function buildMetafileForType(
+  metafile: Metafile,
+  type: 'browser' | 'server',
+  outputFiles: BuildOutputFile[],
+): Metafile {
+  const outputPathsForType = new Set(
+    outputFiles
+      .filter(({ type: fileType }) => {
+        const isServerFile =
+          fileType === BuildOutputFileType.ServerApplication ||
+          fileType === BuildOutputFileType.ServerRoot;
+
+        return type === 'server' ? isServerFile : !isServerFile;
+      })
+      .map(({ path }) => path),
+  );
+
+  const filteredOutputs: Metafile['outputs'] = {};
+  for (const [outputPath, output] of Object.entries(metafile.outputs)) {
+    if (outputPathsForType.has(outputPath)) {
+      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[],

packages/angular_devkit/build_angular/src/builders/browser-esbuild/schema.json

@@ -406,7 +406,7 @@
     },
     "statsJson": {
       "type": "boolean",
-      "description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
+      "description": "Generates a 'browser-stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
       "default": false
     },
     "budgets": {

packages/angular_devkit/build_angular/src/builders/browser/schema.json

@@ -394,7 +394,7 @@
     },
     "statsJson": {
       "type": "boolean",
-      "description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
+      "description": "Generates a 'browser-stats.json' (and 'server-stats.json' when SSR is enabled) file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
       "default": false
     },
     "budgets": {

packages/angular_devkit/build_angular/src/builders/browser/specs/stats-json_spec.ts

@@ -21,13 +21,13 @@ describe('Browser Builder stats json', () => {
 
   it('works', async () => {
     const { files } = await browserBuild(architect, host, target, { statsJson: true });
-    expect('stats.json' in files).toBe(true);
+    expect('browser-stats.json' in files).toBe(true);
   });
 
   it('works with profile flag', async () => {
     const { files } = await browserBuild(architect, host, target, { statsJson: true });
-    expect('stats.json' in files).toBe(true);
-    const stats = JSON.parse(await files['stats.json']);
+    expect('browser-stats.json' in files).toBe(true);
+    const stats = JSON.parse(await files['browser-stats.json']);
     expect(stats.chunks[0].modules[0].profile.building).toBeDefined();
   });
 });

packages/angular_devkit/build_angular/src/builders/server/schema.json

@@ -208,7 +208,7 @@
     },
     "statsJson": {
       "type": "boolean",
-      "description": "Generates a 'stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
+      "description": "Generates a 'browser-stats.json' and 'server-stats.json' file which can be analyzed using tools such as 'webpack-bundle-analyzer'.",
       "default": false
     },
     "watch": {

packages/angular_devkit/build_angular/src/tools/webpack/configs/common.ts

@@ -83,9 +83,8 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
   // Once TypeScript provides support for keeping the dynamic import this workaround can be
   // changed to a direct dynamic import.
   const { VERSION: NG_VERSION } = await import('@angular/compiler-cli');
-  const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT } = await import(
-    '@angular/compiler-cli/private/tooling'
-  );
+  const { GLOBAL_DEFS_FOR_TERSER, GLOBAL_DEFS_FOR_TERSER_WITH_AOT } =
+    await import('@angular/compiler-cli/private/tooling');
 
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
@@ -245,7 +244,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
 
   if (buildOptions.statsJson) {
     extraPlugins.push(
-      new JsonStatsPlugin(path.resolve(root, buildOptions.outputPath, 'stats.json')),
+      new JsonStatsPlugin(path.resolve(root, buildOptions.outputPath, 'browser-stats.json')),
     );
   }