fix(@angular-devkit/build-angular): only show changed output files in…

… watch mode with esbuild Similar to how the Webpack-based `browser` builder only shows the output files that have changed during watch mode (including `ng serve`), the esbuild-based builders will now also only show changed files. For large applications, this can greatly reduce the amount of text shown in the console when actively developing in watch mode. (cherry picked from commit 5a25398)
angular · Oct 27, 2023 · d4f37da · d4f37da
1 parent 9994b2d
commit d4f37da
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts b/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts
@@ -256,7 +256,16 @@ export async function executeBuild(
   }
 
   printWarningsAndErrorsToConsole(context, warnings, errors);
-  logBuildStats(context, metafile, initialFiles, budgetFailures, estimatedTransferSizes);
+  const changedFiles =
+    rebuildState && executionResult.findChangedFiles(rebuildState.previousOutputHashes);
+  logBuildStats(
+    context,
+    metafile,
+    initialFiles,
+    budgetFailures,
+    changedFiles,
+    estimatedTransferSizes,
+  );
 
   // Write metafile if stats option is enabled
   if (options.stats) {

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/bundler-execution-result.ts
@@ -21,6 +21,7 @@ export interface RebuildState {
   rebuildContexts: BundlerContext[];
   codeBundleCache?: SourceFileCache;
   fileChanges: ChangedFiles;
+  previousOutputHashes: Map<string, string>;
 }
 
 /**
@@ -91,9 +92,22 @@ export class ExecutionResult {
       rebuildContexts: this.rebuildContexts,
       codeBundleCache: this.codeBundleCache,
       fileChanges,
+      previousOutputHashes: new Map(this.outputFiles.map((file) => [file.path, file.hash])),
     };
   }
 
+  findChangedFiles(previousOutputHashes: Map<string, string>): Set<string> {
+    const changed = new Set<string>();
+    for (const file of this.outputFiles) {
+      const previousHash = previousOutputHashes.get(file.path);
+      if (previousHash === undefined || previousHash !== file.hash) {
+        changed.add(file.path);
+      }
+    }
+
+    return changed;
+  }
+
   async dispose(): Promise<void> {
     await Promise.allSettled(this.rebuildContexts.map((context) => context.dispose()));
   }

diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts
@@ -28,9 +28,11 @@ export function logBuildStats(
   metafile: Metafile,
   initial: Map<string, InitialFileRecord>,
   budgetFailures: BudgetCalculatorResult[] | undefined,
+  changedFiles?: Set<string>,
   estimatedTransferSizes?: Map<string, number>,
 ): void {
   const stats: BundleStats[] = [];
+  let unchangedCount = 0;
   for (const [file, output] of Object.entries(metafile.outputs)) {
     // Only display JavaScript and CSS files
     if (!file.endsWith('.js') && !file.endsWith('.css')) {
@@ -42,6 +44,12 @@ export function logBuildStats(
       continue;
     }
 
+    // Show only changed files if a changed list is provided
+    if (changedFiles && !changedFiles.has(file)) {
+      ++unchangedCount;
+      continue;
+    }
+
     let name = initial.get(file)?.name;
     if (name === undefined && output.entryPoint) {
       name = path
@@ -56,15 +64,22 @@ export function logBuildStats(
     });
   }
 
-  const tableText = generateBuildStatsTable(
-    stats,
-    true,
-    true,
-    !!estimatedTransferSizes,
-    budgetFailures,
-  );
+  if (stats.length > 0) {
+    const tableText = generateBuildStatsTable(
+      stats,
+      true,
+      unchangedCount === 0,
+      !!estimatedTransferSizes,
+      budgetFailures,
+    );
 
-  context.logger.info('\n' + tableText + '\n');
+    context.logger.info('\n' + tableText + '\n');
+  } else if (changedFiles !== undefined) {
+    context.logger.info('\nNo output file changes.\n');
+  }
+  if (unchangedCount > 0) {
+    context.logger.info(`Unchanged output files: ${unchangedCount}`);
+  }
 }
 
 export async function calculateEstimatedTransferSizes(