fix(@angular-devkit/build-angular): show lazy files in stat table correctly with esbuild

When using the esbuild-based browser application builder, the output build file stat table
was incorrectly displaying non-injected global styles and scripts as initial files. These
output files will now be correctly shown as lazy files. Initial files will also now display
their respective name if available. The table entries are now sorted in descending order by
raw file size as was done in the Webpack-based builder.

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts

@@ -278,7 +278,7 @@ async function execute(
     }
   }
 
-  logBuildStats(context, metafile);
+  logBuildStats(context, metafile, initialFiles);
 
   const buildTime = Number(process.hrtime.bigint() - startTime) / 10 ** 9;
   context.logger.info(`Complete. [${buildTime.toFixed(3)} seconds]`);
@@ -723,11 +723,12 @@ export async function* buildEsbuildBrowser(
 
 export default createBuilder(buildEsbuildBrowser);
 
-function logBuildStats(context: BuilderContext, metafile: Metafile) {
+function logBuildStats(context: BuilderContext, metafile: Metafile, initialFiles: FileInfo[]) {
+  const initial = new Map(initialFiles.map((info) => [info.file, info.name]));
   const stats: BundleStats[] = [];
   for (const [file, output] of Object.entries(metafile.outputs)) {
-    // Skip sourcemaps
-    if (file.endsWith('.map')) {
+    // Only display JavaScript and CSS files
+    if (!file.endsWith('.js') && !file.endsWith('.css')) {
       continue;
     }
     // Skip internal component resources
@@ -737,8 +738,8 @@ function logBuildStats(context: BuilderContext, metafile: Metafile) {
     }
 
     stats.push({
-      initial: !!output.entryPoint,
-      stats: [file, '', output.bytes, ''],
+      initial: initial.has(file),
+      stats: [file, initial.get(file) ?? '', output.bytes, ''],
     });
   }
 

packages/angular_devkit/build_angular/src/webpack/utils/stats.ts

@@ -119,6 +119,19 @@ export function generateBuildStatsTable(
     }
   }
 
+  // Sort descending by raw size
+  data.sort((a, b) => {
+    if (a.stats[2] > b.stats[2]) {
+      return -1;
+    }
+
+    if (a.stats[2] < b.stats[2]) {
+      return 1;
+    }
+
+    return 0;
+  });
+
   for (const { initial, stats } of data) {
     const [files, names, rawSize, estimatedTransferSize] = stats;
     const getRawSizeColor = getSizeColor(names, files);
@@ -274,19 +287,6 @@ function statsToString(
 
   runsCache.add(json.outputPath || '');
 
-  // Sort chunks by size in descending order
-  changedChunksStats.sort((a, b) => {
-    if (a.stats[2] > b.stats[2]) {
-      return -1;
-    }
-
-    if (a.stats[2] < b.stats[2]) {
-      return 1;
-    }
-
-    return 0;
-  });
-
   const statsTable = generateBuildStatsTable(
     changedChunksStats,
     colors,