From 944cbcdb1af62855febc931fce92debf28a3b2a5 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Tue, 30 Jan 2024 11:46:35 +0000 Subject: [PATCH] fix(@angular-devkit/build-angular): limit the number of lazy chunks visible in the stats table Prior to this change in the stats table we listed all the lazy chunk, in some cases this could be hundreds of files. With this change, we limit the number of files listed. To display all entire list of files users would need to use the `--verbose` flag. --- .../src/builders/application/execute-build.ts | 2 + .../build_angular/src/tools/esbuild/utils.ts | 2 + .../src/tools/webpack/utils/stats.ts | 50 +++++++++++++++---- 3 files changed, 45 insertions(+), 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 index b839376dae34..fc1f76867371 100644 --- a/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts +++ b/packages/angular_devkit/build_angular/src/builders/application/execute-build.ts @@ -37,6 +37,7 @@ export async function executeBuild( cacheOptions, prerenderOptions, ssrOptions, + verbose, } = options; // TODO: Consider integrating into watch mode. Would require full rebuild on target changes. @@ -190,6 +191,7 @@ export async function executeBuild( changedFiles, estimatedTransferSizes, !!ssrOptions, + verbose, ); // Write metafile if stats option is enabled diff --git a/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts b/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts index 92f2bf6c7cba..5a67f469d118 100644 --- a/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts +++ b/packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts @@ -29,6 +29,7 @@ export function logBuildStats( changedFiles?: Set, estimatedTransferSizes?: Map, ssrOutputEnabled?: boolean, + verbose?: boolean, ): void { const browserStats: BundleStats[] = []; const serverStats: BundleStats[] = []; @@ -86,6 +87,7 @@ export function logBuildStats( unchangedCount === 0, !!estimatedTransferSizes, budgetFailures, + verbose, ); logger.info(tableText + '\n'); diff --git a/packages/angular_devkit/build_angular/src/tools/webpack/utils/stats.ts b/packages/angular_devkit/build_angular/src/tools/webpack/utils/stats.ts index 4260e2e0dc9e..02d734a04cbd 100644 --- a/packages/angular_devkit/build_angular/src/tools/webpack/utils/stats.ts +++ b/packages/angular_devkit/build_angular/src/tools/webpack/utils/stats.ts @@ -81,6 +81,7 @@ export function generateEsbuildBuildStatsTable( showTotalSize: boolean, showEstimatedTransferSize: boolean, budgetFailures?: BudgetCalculatorResult[], + verbose?: boolean, ): string { const bundleInfo = generateBuildStatsData( browserStats, @@ -88,6 +89,7 @@ export function generateEsbuildBuildStatsTable( showTotalSize, showEstimatedTransferSize, budgetFailures, + verbose, ); if (serverStats.length) { @@ -100,7 +102,7 @@ export function generateEsbuildBuildStatsTable( bundleInfo.push( [m('Server bundles')], - ...generateBuildStatsData(serverStats, colors, false, false, undefined), + ...generateBuildStatsData(serverStats, colors, false, false, undefined, verbose), ); } @@ -120,6 +122,7 @@ export function generateBuildStatsTable( showTotalSize, showEstimatedTransferSize, budgetFailures, + true, ); return generateTableText(bundleInfo, colors); @@ -131,6 +134,7 @@ function generateBuildStatsData( showTotalSize: boolean, showEstimatedTransferSize: boolean, budgetFailures?: BudgetCalculatorResult[], + verbose?: boolean, ): (string | number)[][] { if (data.length === 0) { return []; @@ -159,7 +163,9 @@ function generateBuildStatsData( const changedLazyChunksStats: BundleStatsData[] = []; let initialTotalRawSize = 0; + let changedLazyChunksCount = 0; let initialTotalEstimatedTransferSize; + const maxLazyChunksWithoutBudgetFailures = 15; const budgets = new Map(); if (budgetFailures) { @@ -187,9 +193,20 @@ function generateBuildStatsData( for (const { initial, stats } of data) { const [files, names, rawSize, estimatedTransferSize] = stats; + if ( + !initial && + !verbose && + changedLazyChunksStats.length >= maxLazyChunksWithoutBudgetFailures && + !budgets.has(names) && + !budgets.has(files) + ) { + // Limit the number of lazy chunks displayed in the stats table when there is no budget failure and not in verbose mode. + changedLazyChunksCount++; + continue; + } + const getRawSizeColor = getSizeColor(names, files); let data: BundleStatsData; - if (showEstimatedTransferSize) { data = [ g(files), @@ -223,16 +240,15 @@ function generateBuildStatsData( } } else { changedLazyChunksStats.push(data); + changedLazyChunksCount++; } } const bundleInfo: (string | number)[][] = []; const baseTitles = ['Names', 'Raw size']; - const tableAlign: ('l' | 'r')[] = ['l', 'l', 'r']; if (showEstimatedTransferSize) { baseTitles.push('Estimated transfer size'); - tableAlign.push('r'); } // Entry chunks @@ -240,8 +256,6 @@ function generateBuildStatsData( bundleInfo.push(['Initial chunk files', ...baseTitles].map(bold), ...changedEntryChunksStats); if (showTotalSize) { - bundleInfo.push([]); - const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x); const totalSizeElements = [ ' ', @@ -255,7 +269,7 @@ function generateBuildStatsData( : '-', ); } - bundleInfo.push(totalSizeElements.map(bold)); + bundleInfo.push([], totalSizeElements.map(bold)); } } @@ -267,12 +281,22 @@ function generateBuildStatsData( // Lazy chunks if (changedLazyChunksStats.length) { bundleInfo.push(['Lazy chunk files', ...baseTitles].map(bold), ...changedLazyChunksStats); + + if (changedLazyChunksCount > changedLazyChunksStats.length) { + bundleInfo.push([ + dim( + `...and ${changedLazyChunksCount - changedLazyChunksStats.length} more lazy chunks files. ` + + 'Use "--verbose" to show all the files.', + ), + ]); + } } return bundleInfo; } function generateTableText(bundleInfo: (string | number)[][], colors: boolean): string { + const skipText = (value: string) => value.includes('...and '); const longest: number[] = []; for (const item of bundleInfo) { for (let i = 0; i < item.length; i++) { @@ -281,6 +305,10 @@ function generateTableText(bundleInfo: (string | number)[][], colors: boolean): } const currentItem = item[i].toString(); + if (skipText(currentItem)) { + continue; + } + const currentLongest = (longest[i] ??= 0); const currentItemLength = removeColor(currentItem).length; if (currentLongest < currentItemLength) { @@ -298,10 +326,14 @@ function generateTableText(bundleInfo: (string | number)[][], colors: boolean): } const currentItem = item[i].toString(); + if (skipText(currentItem)) { + continue; + } + const currentItemLength = removeColor(currentItem).length; const stringPad = ' '.repeat(longest[i] - currentItemLength); - // Last item is right aligned, thus we add the padding at the start. - item[i] = longest.length === i + 1 ? stringPad + currentItem : currentItem + stringPad; + // Values in columns at index 2 and 3 (Raw and Estimated sizes) are always right aligned. + item[i] = i >= 2 ? stringPad + currentItem : currentItem + stringPad; } outputTable.push(item.join(seperator));