feat: beautify file size logs for multiple environments (#3668)

web-infra-dev · Oct 10, 2024 · a4263a7 · a4263a7
1 parent 01a6e2d
commit a4263a7
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 48 deletions.
diff --git a/e2e/cases/print-file-size/basic/index.test.ts b/e2e/cases/print-file-size/basic/index.test.ts
@@ -29,8 +29,8 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Gzipped size:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('Total:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('gzip:'))).toBeTruthy();
   });
 
   test('should print size of multiple environments correctly', async () => {
@@ -62,11 +62,7 @@ test.describe('should print file size correctly', async () => {
     });
 
     // dist/index.html
-    expect(
-      logs.some(
-        (log) => log.includes('Production file sizes') && log.includes('web'),
-      ),
-    ).toBeTruthy();
+    expect(logs.some((log) => log.includes('File (web)'))).toBeTruthy();
 
     expect(
       logs.some(
@@ -78,11 +74,7 @@ test.describe('should print file size correctly', async () => {
     ).toBeTruthy();
 
     // dist/server/index.js
-    expect(
-      logs.some(
-        (log) => log.includes('Production file sizes') && log.includes('node'),
-      ),
-    ).toBeTruthy();
+    expect(logs.some((log) => log.includes('File (node)'))).toBeTruthy();
     expect(
       logs.some(
         (log) =>
@@ -103,11 +95,11 @@ test.describe('should print file size correctly', async () => {
     ).toBeTruthy();
 
     expect(
-      logs.some((log) => log.includes('Total size:') && log.includes('kB')),
+      logs.some((log) => log.includes('Total:') && log.includes('kB')),
     ).toBeTruthy();
 
     expect(
-      logs.some((log) => log.includes('Gzipped size:') && log.includes('kB')),
+      logs.some((log) => log.includes('gzip:') && log.includes('kB')),
     ).toBeTruthy();
   });
 
@@ -122,8 +114,8 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
-    expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy();
-    expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('Total:'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy();
   });
 
   test('printFileSize.detail: false should work', async () => {
@@ -139,8 +131,8 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
-    expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Gzipped size:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('Total:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('gzip:'))).toBeTruthy();
   });
 
   test('printFileSize.total: false should work', async () => {
@@ -156,8 +148,8 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy();
-    expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('Total:'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy();
   });
 
   test('should print dist folder correctly if it is not a subdir of root', async () => {
@@ -195,7 +187,7 @@ test.describe('should print file size correctly', async () => {
     });
 
     expect(logs.some((log) => log.includes('index.html'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Total size:'))).toBeTruthy();
-    expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('Total:'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy();
   });
 });
diff --git a/e2e/cases/print-file-size/with-error/index.test.ts b/e2e/cases/print-file-size/with-error/index.test.ts
@@ -19,8 +19,8 @@ test('should not print file size if has errors', async () => {
     expect(err).toBeTruthy();
   }
 
-  expect(logs.some((log) => log.includes('Total size:'))).toBeFalsy();
-  expect(logs.some((log) => log.includes('Gzipped size:'))).toBeFalsy();
+  expect(logs.some((log) => log.includes('Total:'))).toBeFalsy();
+  expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy();
 
   restore();
 });
diff --git a/packages/core/src/plugins/fileSize.ts b/packages/core/src/plugins/fileSize.ts
@@ -36,12 +36,13 @@ function getHeader(
   longestFileLength: number,
   longestLabelLength: number,
   options: PrintFileSizeOptions,
+  environmentName: string,
 ) {
   const longestLengths = [longestFileLength, longestLabelLength];
-  const rowTypes = ['File', 'Size'];
+  const rowTypes = [`File (${environmentName})`, 'Size'];
 
   if (options.compressed) {
-    rowTypes.push('Gzipped');
+    rowTypes.push('Gzip');
   }
 
   const headerRow = rowTypes.reduce((prev, cur, index) => {
@@ -54,7 +55,7 @@ function getHeader(
     return `${prev + curLabel}    `;
   }, '  ');
 
-  return color.bold(color.blue(headerRow));
+  return color.blue(headerRow);
 }
 
 const calcFileSize = (len: number) => {
@@ -79,6 +80,7 @@ async function printFileSizes(
   options: PrintFileSizeOptions,
   stats: Rspack.Stats,
   rootPath: string,
+  environmentName: string,
 ) {
   const logs: string[] = [];
   if (options.detail === false && options.total === false) {
@@ -142,6 +144,8 @@ async function printFileSizes(
     return logs;
   }
 
+  logs.push('');
+
   assets.sort((a, b) => a.size - b.size);
 
   const longestLabelLength = Math.max(...assets.map((a) => a.sizeLabel.length));
@@ -150,7 +154,14 @@ async function printFileSizes(
   );
 
   if (options.detail !== false) {
-    logs.push(getHeader(longestFileLength, longestLabelLength, options));
+    logs.push(
+      getHeader(
+        longestFileLength,
+        longestLabelLength,
+        options,
+        environmentName,
+      ),
+    );
   }
 
   let totalSize = 0;
@@ -193,19 +204,18 @@ async function printFileSizes(
   }
 
   if (options.total !== false) {
-    const totalSizeLabel = `${color.bold(
-      color.blue('Total size:'),
-    )}  ${calcFileSize(totalSize)}`;
+    const totalSizeLabel = `${color.blue('Total:')} ${calcFileSize(totalSize)}`;
 
-    let log = `\n  ${totalSizeLabel}\n`;
+    let log = `\n  ${totalSizeLabel}`;
 
     if (options.compressed) {
-      const gzippedSizeLabel = `${color.bold(
-        color.blue('Gzipped size:'),
-      )}  ${calcFileSize(totalGzipSize)}`;
-      log += `  ${gzippedSizeLabel}\n`;
+      log += color.dim(` (gzip: ${calcFileSize(totalGzipSize)})`);
     }
 
+    // log += ` ${color.dim(`(${environmentName})`)}`;
+
+    log += '\n';
+
     logs.push(log);
   }
 
@@ -222,6 +232,8 @@ export const pluginFileSize = (): RsbuildPlugin => ({
         return;
       }
 
+      let printed = false;
+
       await Promise.all(
         Object.values(environments).map(async (environment, index) => {
           const { printFileSize } = environment.config.performance;
@@ -250,14 +262,19 @@ export const pluginFileSize = (): RsbuildPlugin => ({
             mergedConfig,
             multiStats[index],
             api.context.rootPath,
+            environment.name,
           );
 
-          const name = color.green(environment.name);
-          logger.info(`Production file sizes for ${name}:\n`);
+          // log a separator line after the previous print
+          if (printed) {
+            logger.log(color.dim('  -----'));
+          }
 
           for (const log of statsLog) {
             logger.log(log);
           }
+
+          printed = true;
         }),
       ).catch((err) => {
         logger.warn('Failed to print file size.');

diff --git a/website/docs/en/config/performance/print-file-size.mdx b/website/docs/en/config/performance/print-file-size.mdx
@@ -30,16 +30,13 @@ Whether to print the file sizes after production build.
 The default output log is as follows:
 
 ```bash
-info    Production file sizes:
-
-  File                                    Size        Gzipped
+  File (web)                              Size        Gzip
   dist/static/js/lib-react.b0714b60.js    140.4 kB    45.0 kB
   dist/static/js/index.f3fde9c7.js        1.9 kB      0.97 kB
   dist/index.html                         0.39 kB     0.25 kB
   dist/static/css/index.2960ac62.css      0.35 kB     0.26 kB
 
-  Total size:  143.0 kB
-  Gzipped size:  46.5 kB
+  Total: 143.0 kB (gzip: 46.3 kB)
 ```
 
 ## Disable Outputs

diff --git a/website/docs/zh/config/performance/print-file-size.mdx b/website/docs/zh/config/performance/print-file-size.mdx
@@ -30,16 +30,13 @@ type PrintFileSizeOptions =
 默认输出的日志如下：
 
 ```bash
-info    Production file sizes:
-
-  File                                    Size        Gzipped
+  File (web)                              Size        Gzip
   dist/static/js/lib-react.b0714b60.js    140.4 kB    45.0 kB
   dist/static/js/index.f3fde9c7.js        1.9 kB      0.97 kB
   dist/index.html                         0.39 kB     0.25 kB
   dist/static/css/index.2960ac62.css      0.35 kB     0.26 kB
 
-  Total size:  143.0 kB
-  Gzipped size:  46.5 kB
+  Total: 143.0 kB (gzip: 46.3 kB)
 ```
 
 ## 禁用输出