8000 fix(@angular-devkit/build-angular): limit the number of lazy chunks v… · angular/angular-cli@944cbcd · GitHub
[go: up one dir, main page]
Skip to content

Commit 944cbcd

Browse files
alan-agius4alan-agius4
committed
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.
1 parent 41ea985 commit 944cbcd

File tree

3 files changed

+45
-9
lines changed

3 files changed

+45
-9
lines changed

‎packages/angular_devkit/build_angular/src/builders/application/execute-build.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export async function executeBuild(
3737
cacheOptions,
3838
prerenderOptions,
3939
ssrOptions,
40+
verbose,
4041
} = options;
4142

4243
// TODO: Consider integrating into watch mode. Would require full rebuild on target changes.
@@ -190,6 +191,7 @@ export async function executeBuild(
190191
changedFiles,
191192
estimatedTransferSizes,
192193
!!ssrOptions,
194+
verbose,
193195
);
194196

195197
// Write metafile if stats option is enabled

‎packages/angular_devkit/build_angular/src/tools/esbuild/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export function logBuildStats(
2929
changedFiles?: Set<string>,
3030
estimatedTransferSizes?: Map<string, number>,
3131
ssrOutputEnabled?: boolean,
32+
verbose?: boolean,
3233
): void {
3334
const browserStats: BundleStats[] = [];
3435
const serverStats: BundleStats[] = [];
@@ -86,6 +87,7 @@ export function logBuildStats(
8687
unchangedCount === 0,
8788
!!estimatedTransferSizes,
8889
budgetFailures,
90+
verbose,
8991
);
9092

9193
logger.info(tableText + '\n');

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

Lines changed: 41 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,15 @@ export function generateEsbuildBuildStatsTable(
8181
showTotalSize: boolean,
8282
showEstimatedTransferSize: boolean,
8383
budgetFailures?: BudgetCalculatorResult[],
84+
verbose?: boolean,
8485
): string {
8586
const bundleInfo = generateBuildStatsData(
8687
browserStats,
8788
colors,
8889
showTotalSize,
8990
showEstimatedTransferSize,
9091
budgetFailures,
92+
verbose,
9193
);
9294

9395
if (serverStats.length) {
@@ -100,7 +102,7 @@ export function generateEsbuildBuildStatsTable(
100102

101103
bundleInfo.push(
102104
[m('Server bundles')],
103-
...generateBuildStatsData(serverStats, colors, false, false, undefined),
105+
...generateBuildStatsData(serverStats, colors, false, false, undefined, verbose),
104106
);
105107
}
106108

@@ -120,6 +122,7 @@ export function generateBuildStatsTable(
120122
showTotalSize,
121123
showEstimatedTransferSize,
122124
budgetFailures,
125+
true,
123126
);
124127

125128
return generateTableText(bundleInfo, colors);
@@ -131,6 +134,7 @@ function generateBuildStatsData(
131134
showTotalSize: boolean,
132135
showEstimatedTransferSize: boolean,
133136
budgetFailures?: BudgetCalculatorResult[],
137+
verbose?: boolean,
134138
): (string | number)[][] {
135139
if (data.length === 0) {
136140
return [];
@@ -159,7 +163,9 @@ function generateBuildStatsData(
159163
const changedLazyChunksStats: BundleStatsData[] = [];
160164

161165
let initialTotalRawSize = 0;
166+
let changedLazyChunksCount = 0;
162167
let initialTotalEstimatedTransferSize;
168+
const maxLazyChunksWithoutBudgetFailures = 15;
163169

164170
const budgets = new Map<string, string>();
165171
if (budgetFailures) {
@@ -187,9 +193,20 @@ function generateBuildStatsData(
187193

188194
for (const { initial, stats } of data) {
189195
const [files, names, rawSize, estimatedTransferSize] = stats;
196+
if (
197+
!initial &&
198+
!verbose &&
199+
changedLazyChunksStats.length >= maxLazyChunksWithoutBudgetFailures &&
200+
!budgets.has(names) &&
201+
!budgets.has(files)
202+
) {
203+
// Limit the number of lazy chunks displayed in the stats table when there is no budget failure and not in verbose mode.
204+
changedLazyChunksCount++;
205+
continue;
206+
}
207+
190208
const getRawSizeColor = getSizeColor(names, files);
191209
let data: BundleStatsData;
192-
193210
if (showEstimatedTransferSize) {
194211
data = [
195212
g(files),
@@ -223,25 +240,22 @@ function generateBuildStatsData(
223240
}
224241
} else {
225242
changedLazyChunksStats.push(data);
243+
changedLazyChunksCount++;
226244
}
227245
}
228246

229247
const bundleInfo: (string | number)[][] = [];
230248
const baseTitles = ['Names', 'Raw size'];
231-
const tableAlign: ('l' | 'r')[] = ['l', 'l', 'r'];
232249

233250
if (showEstimatedTransferSize) {
234251
baseTitles.push('Estimated transfer size');
235-
tableAlign.push('r');
236252
}
237253

238254
// Entry chunks
239255
if (changedEntryChunksStats.length) {
240256
bundleInfo.push(['Initial chunk files', ...baseTitles].map(bold), ...changedEntryChunksStats);
241257

242258
if (showTotalSize) {
243-
bundleInfo.push([]);
244-
245259
const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x);
246260
const totalSizeElements = [
247261
' ',
@@ -255,7 +269,7 @@ function generateBuildStatsData(
255269
: '-',
256270
);
257271
}
258-
bundleInfo.push(totalSizeElements.map(bold));
272+
bundleInfo.push([], totalSizeElements.map(bold));
259273
}
260274
}
261275

@@ -267,12 +281,22 @@ function generateBuildStatsData(
267281
// Lazy chunks
268282
if (changedLazyChunksStats.length) {
269283
bundleInfo.push(['Lazy chunk files', ...baseTitles].map(bold), ...changedLazyChunksStats);
284+
285+
if (changedLazyChunksCount > changedLazyChunksStats.length) {
286+
bundleInfo.push([
287+
dim(
288+
`...and ${changedLazyChunksCount - changedLazyChunksStats.length} more lazy chunks files. ` +
289+
'Use "--verbose" to show all the files.',
290+
),
291+
]);
292+
}
270293
}
271294

272295
return bundleInfo;
273296
}
274297

275298
function generateTableText(bundleInfo: (string | number)[][], colors: boolean): string {
299+
const skipText = (value: string) => value.includes('...and ');
276300
const longest: number[] = [];
277301
for (const item of bundleInfo) {
278302
for (let i = 0; i < item.length; i++) {
@@ -281,6 +305,10 @@ function generateTableText(bundleInfo: (string | number)[][], colors: boolean):
281305
}
282306

283307
const currentItem = item[i].toString();
308+
if (skipText(currentItem)) {
309+
continue;
310+
}
311+
284312
const currentLongest = (longest[i] ??= 0);
285313
const currentItemLength = removeColor(currentItem).length;
286314
if (currentLongest < currentItemLength) {
@@ -298,10 +326,14 @@ function generateTableText(bundleInfo: (string | number)[][], colors: boolean):
298326
}
299327

300328
const currentItem = item[i].toString();
329+
if (skipText(currentItem)) {
330+
continue;
331+
}
332+
301333
const currentItemLength = removeColor(currentItem).length;
302334
const stringPad = ' '.repeat(longest[i] - currentItemLength);
303-
// Last item is right aligned, thus we add the padding at the start.
304-
item[i] = longest.length === i + 1 ? stringPad + currentItem : currentItem + stringPad;
335+
// Values in columns at index 2 and 3 (Raw and Estimated sizes) are always right aligned.
336+
item[i] = i >= 2 ? stringPad + currentItem : currentItem + stringPad;
305337
}
306338

307339
outputTable.push(item.join(seperator));

0 commit comments

Comments
 (0)
0