@angular-devkit/build-angular 13.1.0-next.1 → 13.1.0

package/src/webpack/utils/stats.js

@@ -50,35 +50,81 @@ function formatSize(size) {
 exports.formatSize = formatSize;
 function generateBundleStats(info) {
     var _a, _b, _c;
-    const size = typeof info.size === 'number' ? info.size : '-';
+    const rawSize = typeof info.rawSize === 'number' ? info.rawSize : '-';
+    const estimatedTransferSize = typeof info.estimatedTransferSize === 'number' ? info.estimatedTransferSize : '-';
     const files = (_b = (_a = info.files) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.map')).map((f) => path.basename(f)).join(', ')) !== null && _b !== void 0 ? _b : '';
     const names = ((_c = info.names) === null || _c === void 0 ? void 0 : _c.length) ? info.names.join(', ') : '-';
     const initial = !!info.initial;
     return {
         initial,
-        stats: [files, names, size],
+        stats: [files, names, rawSize, estimatedTransferSize],
     };
 }
 exports.generateBundleStats = generateBundleStats;
-function generateBuildStatsTable(data, colors, showTotalSize) {
+function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize, budgetFailures) {
     const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
     const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
+    const r = (x) => (colors ? color_1.colors.redBright(x) : x);
+    const y = (x) => (colors ? color_1.colors.yellowBright(x) : x);
     const bold = (x) => (colors ? color_1.colors.bold(x) : x);
     const dim = (x) => (colors ? color_1.colors.dim(x) : x);
+    const getSizeColor = (name, file, defaultColor = c) => {
+        const severity = budgets.get(name) || (file && budgets.get(file));
+        switch (severity) {
+            case 'warning':
+                return y;
+            case 'error':
+                return r;
+            default:
+                return defaultColor;
+        }
+    };
     const changedEntryChunksStats = [];
     const changedLazyChunksStats = [];
-    let initialTotalSize = 0;
+    let initialTotalRawSize = 0;
+    let initialTotalEstimatedTransferSize;
+    const budgets = new Map();
+    if (budgetFailures) {
+        for (const { label, severity } of budgetFailures) {
+            // In some cases a file can have multiple budget failures.
+            // Favor error.
+            if (label && (!budgets.has(label) || budgets.get(label) === 'warning')) {
+                budgets.set(label, severity);
+            }
+        }
+    }
     for (const { initial, stats } of data) {
-        const [files, names, size] = stats;
-        const data = [
-            g(files),
-            names,
-            c(typeof size === 'number' ? formatSize(size) : size),
-        ];
+        const [files, names, rawSize, estimatedTransferSize] = stats;
+        const getRawSizeColor = getSizeColor(names, files);
+        let data;
+        if (showEstimatedTransferSize) {
+            data = [
+                g(files),
+                names,
+                getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                c(typeof estimatedTransferSize === 'number'
+                    ? formatSize(estimatedTransferSize)
+                    : estimatedTransferSize),
+            ];
+        }
+        else {
+            data = [
+                g(files),
+                names,
+                getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
+                '',
+            ];
+        }
         if (initial) {
             changedEntryChunksStats.push(data);
-            if (typeof size === 'number') {
-                initialTotalSize += size;
+            if (typeof rawSize === 'number') {
+                initialTotalRawSize += rawSize;
+            }
+            if (showEstimatedTransferSize && typeof estimatedTransferSize === 'number') {
+                if (initialTotalEstimatedTransferSize === undefined) {
+                    initialTotalEstimatedTransferSize = 0;
+                }
+                initialTotalEstimatedTransferSize += estimatedTransferSize;
             }
         }
         else {
@@ -86,12 +132,29 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
         }
     }
     const bundleInfo = [];
+    const baseTitles = ['Names', 'Raw Size'];
+    const tableAlign = ['l', 'l', 'r'];
+    if (showEstimatedTransferSize) {
+        baseTitles.push('Estimated Transfer Size');
+        tableAlign.push('r');
+    }
     // Entry chunks
     if (changedEntryChunksStats.length) {
-        bundleInfo.push(['Initial Chunk Files', 'Names', 'Size'].map(bold), ...changedEntryChunksStats);
+        bundleInfo.push(['Initial Chunk Files', ...baseTitles].map(bold), ...changedEntryChunksStats);
         if (showTotalSize) {
             bundleInfo.push([]);
-            bundleInfo.push([' ', 'Initial Total', formatSize(initialTotalSize)].map(bold));
+            const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x);
+            const totalSizeElements = [
+                ' ',
+                'Initial Total',
+                initialSizeTotalColor(formatSize(initialTotalRawSize)),
+            ];
+            if (showEstimatedTransferSize) {
+                totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
+                    ? formatSize(initialTotalEstimatedTransferSize)
+                    : '-');
+            }
+            bundleInfo.push(totalSizeElements.map(bold));
         }
     }
     // Seperator
@@ -100,12 +163,12 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
     }
     // Lazy chunks
     if (changedLazyChunksStats.length) {
-        bundleInfo.push(['Lazy Chunk Files', 'Names', 'Size'].map(bold), ...changedLazyChunksStats);
+        bundleInfo.push(['Lazy Chunk Files', ...baseTitles].map(bold), ...changedLazyChunksStats);
     }
     return (0, text_table_1.default)(bundleInfo, {
         hsep: dim(' | '),
         stringLength: (s) => (0, color_1.removeColor)(s).length,
-        align: ['l', 'l', 'r'],
+        align: tableAlign,
     });
 }
 function generateBuildStats(hash, time, colors) {
@@ -118,30 +181,45 @@ function generateBuildStats(hash, time, colors) {
 const runsCache = new Set();
 function statsToString(json, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-statsConfig, bundleState) {
+statsConfig, budgetFailures) {
     var _a, _b;
     if (!((_a = json.chunks) === null || _a === void 0 ? void 0 : _a.length)) {
         return '';
     }
     const colors = statsConfig.colors;
     const rs = (x) => (colors ? color_1.colors.reset(x) : x);
-    const changedChunksStats = bundleState !== null && bundleState !== void 0 ? bundleState : [];
+    const changedChunksStats = [];
     let unchangedChunkNumber = 0;
-    if (!(bundleState === null || bundleState === void 0 ? void 0 : bundleState.length)) {
-        const isFirstRun = !runsCache.has(json.outputPath || '');
-        for (const chunk of json.chunks) {
-            // During first build we want to display unchanged chunks
-            // but unchanged cached chunks are always marked as not rendered.
-            if (!isFirstRun && !chunk.rendered) {
-                continue;
+    let hasEstimatedTransferSizes = false;
+    const isFirstRun = !runsCache.has(json.outputPath || '');
+    for (const chunk of json.chunks) {
+        // During first build we want to display unchanged chunks
+        // but unchanged cached chunks are always marked as not rendered.
+        if (!isFirstRun && !chunk.rendered) {
+            continue;
+        }
+        const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
+        let rawSize = 0;
+        let estimatedTransferSize;
+        if (assets) {
+            for (const asset of assets) {
+                if (asset.name.endsWith('.map')) {
+                    continue;
+                }
+                rawSize += asset.size;
+                if (typeof asset.info.estimatedTransferSize === 'number') {
+                    if (estimatedTransferSize === undefined) {
+                        estimatedTransferSize = 0;
+                        hasEstimatedTransferSizes = true;
+                    }
+                    estimatedTransferSize += asset.info.estimatedTransferSize;
+                }
             }
-            const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
-            const summedSize = assets === null || assets === void 0 ? void 0 : assets.filter((asset) => !asset.name.endsWith('.map')).reduce((total, asset) => total + asset.size, 0);
-            changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }));
         }
-        unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
-        runsCache.add(json.outputPath || '');
+        changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
     }
+    unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
+    runsCache.add(json.outputPath || '');
     // Sort chunks by size in descending order
     changedChunksStats.sort((a, b) => {
         if (a.stats[2] > b.stats[2]) {
@@ -152,7 +230,7 @@ statsConfig, bundleState) {
         }
         return 0;
     });
-    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0);
+    const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes, budgetFailures);
     // In some cases we do things outside of webpack context
     // Such us index generation, service worker augmentation etc...
     // This will correct the time and include these.
@@ -274,8 +352,8 @@ function createWebpackLoggingCallback(options, logger) {
     };
 }
 exports.createWebpackLoggingCallback = createWebpackLoggingCallback;
-function webpackStatsLogger(logger, json, config, bundleStats) {
-    logger.info(statsToString(json, config.stats, bundleStats));
+function webpackStatsLogger(logger, json, config, budgetFailures) {
+    logger.info(statsToString(json, config.stats, budgetFailures));
     if (statsHasWarnings(json)) {
         logger.warn(statsWarningsToString(json, config.stats));
     }