fix: file size logging when detail is disabled (#5125)

Author: chenjiahan

e2e/cases/print-file-size/basic/index.test.ts

@@ -125,7 +125,7 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
-    expect(logs.some((log) => log.includes('Total:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('Total size (web):'))).toBeTruthy();
   });
 
   test('printFileSize.total: false should work', async () => {

packages/core/src/plugins/fileSize.ts

@@ -96,7 +96,12 @@ async function printFileSizes(
   environmentName: string,
 ) {
   const logs: string[] = [];
-  if (options.detail === false && options.total === false) {
+
+  let showTotal = options.total !== false;
+  const showDetail = options.detail !== false;
+  const exclude = options.exclude ?? excludeAsset;
+
+  if (!showTotal && !showDetail) {
     return logs;
   }
 
@@ -142,7 +147,6 @@ async function printFileSizes(
       groupAssetsByEmitStatus: false,
     });
 
-    const exclude = options.exclude ?? excludeAsset;
     const filteredAssets = (origin.assets || []).filter((asset) => {
       const assetInfo: PrintFileSizeAsset = {
         name: asset.name,
@@ -176,44 +180,50 @@ async function printFileSizes(
   let totalSize = 0;
   let totalGzipSize = 0;
 
+  // No need to print total size if there is only one asset and detail is true
+  showTotal = showTotal && !(showDetail && assets.length === 1);
+
   for (const asset of assets) {
     totalSize += asset.size;
     if (options.compressed) {
       totalGzipSize += asset.gzippedSize ?? asset.size;
     }
   }
 
-  const showTotalSize = options.total !== false && assets.length > 1;
-  const fileHeader = `File (${environmentName})`;
-  const totalSizeLabel = showTotalSize ? 'Total:' : '';
-  const totalSizeStr = showTotalSize ? calcFileSize(totalSize) : '';
-
-  const maxFileLength = Math.max(
-    ...assets.map((a) => (a.folder + path.sep + a.name).length),
-    fileHeader.length,
-    totalSizeLabel.length,
-  );
-  const maxSizeLength = Math.max(
-    ...assets.map((a) => a.sizeLabel.length),
-    totalSizeStr.length,
-  );
-
-  if (options.detail !== false) {
+  const fileHeader = showDetail ? `File (${environmentName})` : '';
+  const totalSizeLabel = showTotal
+    ? showDetail
+      ? 'Total:'
+      : `Total size (${environmentName}):`
+    : '';
+  const totalSizeStr = showTotal ? calcFileSize(totalSize) : '';
+
+  if (showDetail) {
+    const maxFileLength = Math.max(
+      ...assets.map((a) => (a.folder + path.sep + a.name).length),
+      showTotal ? totalSizeLabel.length : 0,
+      fileHeader.length,
+    );
+
+    const maxSizeLength = Math.max(
+      ...assets.map((a) => a.sizeLabel.length),
+      totalSizeStr.length,
+    );
+
     const showGzipHeader = Boolean(
       options.compressed && assets.some((item) => item.gzippedSize !== null),
     );
+
     logs.push(
       getHeader(maxFileLength, maxSizeLength, fileHeader, showGzipHeader),
     );
-  }
 
-  for (const asset of assets) {
-    let { sizeLabel } = asset;
-    const { name, folder, gzipSizeLabel } = asset;
-    const fileNameLength = (folder + path.sep + name).length;
-    const sizeLength = sizeLabel.length;
+    for (const asset of assets) {
+      let { sizeLabel } = asset;
+      const { name, folder, gzipSizeLabel } = asset;
+      const fileNameLength = (folder + path.sep + name).length;
+      const sizeLength = sizeLabel.length;
 
-    if (options.detail !== false) {
       if (sizeLength < maxSizeLength) {
         const rightPadding = ' '.repeat(maxSizeLength - sizeLength);
         sizeLabel += rightPadding;
@@ -235,21 +245,27 @@ async function printFileSizes(
 
       logs.push(log);
     }
-  }
 
-  // only print total size if there are more than one asset
-  if (options.total !== false && assets.length > 1) {
-    logs.push('');
+    if (showTotal) {
+      logs.push('');
+      let log = '  ';
+      log += ' '.repeat(maxFileLength - totalSizeLabel.length);
+      log += color.magenta(totalSizeLabel);
+      log += `    ${totalSizeStr}`;
+
+      if (options.compressed) {
+        const colorFn = getAssetColor(totalGzipSize / assets.length);
+        log += ' '.repeat(maxSizeLength - totalSizeStr.length);
+        log += `    ${colorFn(calcFileSize(totalGzipSize))}`;
+      }
 
-    let log = '  ';
-    log += ' '.repeat(maxFileLength - totalSizeLabel.length);
-    log += color.magenta(totalSizeLabel);
-    log += `    ${totalSizeStr}`;
+      logs.push(log);
+    }
+  } else if (showTotal) {
+    let log = `  ${color.magenta(totalSizeLabel)} ${totalSizeStr}`;
 
     if (options.compressed) {
-      const colorFn = getAssetColor(totalGzipSize / assets.length);
-      log += ' '.repeat(maxSizeLength - totalSizeStr.length);
-      log += `    ${colorFn(calcFileSize(totalGzipSize))}`;
+      log += color.green(` (${calcFileSize(totalGzipSize)} gzipped)`);
     }
 
     logs.push(log);