web-infra-dev · chenjiahan · Jul 12, 2024 · Jul 12, 2024
diff --git a/e2e/cases/performance/print-file-size/index.test.ts b/e2e/cases/performance/print-file-size/index.test.ts
@@ -181,4 +181,21 @@ test.describe('should print file size correctly', async () => {
       ),
     ).toBeTruthy();
   });
+
+  test('should allow to disable gzip-compressed size', async () => {
+    await build({
+      cwd,
+      rsbuildConfig: {
+        performance: {
+          printFileSize: {
+            compressed: false,
+          },
+        },
+      },
+    });
+
+    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();
+  });
 });
diff --git a/packages/core/src/plugins/fileSize.ts b/packages/core/src/plugins/fileSize.ts
@@ -37,9 +37,19 @@ const getAssetColor = (size: number) => {
   return color.green;
 };
 
-function getHeader(longestFileLength: number, longestLabelLength: number) {
+function getHeader(
+  longestFileLength: number,
+  longestLabelLength: number,
+  options: PrintFileSizeOptions,
+) {
   const longestLengths = [longestFileLength, longestLabelLength];
-  const headerRow = ['File', 'Size', 'Gzipped'].reduce((prev, cur, index) => {
+  const rowTypes = ['File', 'Size'];
+
+  if (options.compressed) {
+    rowTypes.push('Gzipped');
+  }
+
+  const headerRow = rowTypes.reduce((prev, cur, index) => {
     const length = longestLengths[index];
     let curLabel = cur;
     if (length) {
@@ -71,12 +81,12 @@ const coloringAssetName = (assetName: string) => {
 };
 
 async function printFileSizes(
-  config: PrintFileSizeOptions,
+  options: PrintFileSizeOptions,
   stats: Stats,
   rootPath: string,
 ) {
   const logs: string[] = [];
-  if (config.detail === false && config.total === false) {
+  if (options.detail === false && options.total === false) {
     return logs;
   }
 
@@ -88,15 +98,18 @@ async function printFileSizes(
     const fileName = asset.name.split('?')[0];
     const contents = await fs.promises.readFile(path.join(distPath, fileName));
     const size = contents.length;
-    const gzippedSize = await gzipSize(contents);
+    const gzippedSize = options.compressed ? await gzipSize(contents) : null;
+    const gzipSizeLabel = gzippedSize
+      ? getAssetColor(gzippedSize)(calcFileSize(gzippedSize))
+      : null;
 
     return {
       size,
       folder: path.join(distFolder, path.dirname(fileName)),
       name: path.basename(fileName),
       gzippedSize,
       sizeLabel: calcFileSize(size),
-      gzipSizeLabel: getAssetColor(gzippedSize)(calcFileSize(gzippedSize)),
+      gzipSizeLabel,
     };
   };
 
@@ -143,8 +156,8 @@ async function printFileSizes(
     ...assets.map((a) => (a.folder + path.sep + a.name).length),
   );
 
-  if (config.detail !== false) {
-    logs.push(getHeader(longestFileLength, longestLabelLength));
+  if (options.detail !== false) {
+    logs.push(getHeader(longestFileLength, longestLabelLength, options));
   }
 
   let totalSize = 0;
@@ -157,9 +170,12 @@ async function printFileSizes(
     const sizeLength = sizeLabel.length;
 
     totalSize += asset.size;
-    totalGzipSize += asset.gzippedSize;
 
-    if (config.detail !== false) {
+    if (asset.gzippedSize) {
+      totalGzipSize += asset.gzippedSize;
+    }
+
+    if (options.detail !== false) {
       if (sizeLength < longestLabelLength) {
         const rightPadding = ' '.repeat(longestLabelLength - sizeLength);
         sizeLabel += rightPadding;
@@ -173,18 +189,31 @@ async function printFileSizes(
         fileNameLabel += rightPadding;
       }
 
-      logs.push(`  ${fileNameLabel}    ${sizeLabel}    ${gzipSizeLabel}`);
+      let log = `  ${fileNameLabel}    ${sizeLabel}`;
+
+      if (gzipSizeLabel) {
+        log += `    ${gzipSizeLabel}`;
+      }
+
+      logs.push(log);
     }
   }
 
-  if (config.total !== false) {
+  if (options.total !== false) {
     const totalSizeLabel = `${color.bold(
       color.blue('Total size:'),
     )}  ${calcFileSize(totalSize)}`;
-    const gzippedSizeLabel = `${color.bold(
-      color.blue('Gzipped size:'),
-    )}  ${calcFileSize(totalGzipSize)}`;
-    logs.push(`\n  ${totalSizeLabel}\n  ${gzippedSizeLabel}\n`);
+
+    let log = `\n  ${totalSizeLabel}\n`;
+
+    if (options.compressed) {
+      const gzippedSizeLabel = `${color.bold(
+        color.blue('Gzipped size:'),
+      )}  ${calcFileSize(totalGzipSize)}`;
+      log += `  ${gzippedSizeLabel}\n`;
+    }
+
+    logs.push(log);
   }
 
   return logs;
@@ -203,29 +232,37 @@ export const pluginFileSize = (): RsbuildPlugin => ({
         Object.values(environments).map(async (environment, index) => {
           const { printFileSize } = environment.config.performance;
 
+          if (printFileSize === false) {
+            return;
+          }
+
           const multiStats = 'stats' in stats ? stats.stats : [stats];
 
-          const printFileSizeConfig =
-            typeof printFileSize === 'boolean'
-              ? {
-                  total: true,
-                  detail: true,
-                }
-              : printFileSize;
-
-          if (printFileSize) {
-            const statsLog = await printFileSizes(
-              printFileSizeConfig,
-              multiStats[index],
-              api.context.rootPath,
-            );
-
-            const name = color.green(environment.name);
-            logger.info(`Production file sizes for ${name}:\n`);
-
-            for (const log of statsLog) {
-              logger.log(log);
-            }
+          const defaultConfig = {
+            total: true,
+            detail: true,
+            compressed: true,
+          };
+
+          const mergedConfig =
+            printFileSize === true
+              ? defaultConfig
+              : {
+                  ...defaultConfig,
+                  ...printFileSize,
+                };
+
+          const statsLog = await printFileSizes(
+            mergedConfig,
+            multiStats[index],
+            api.context.rootPath,
+          );
+
+          const name = color.green(environment.name);
+          logger.info(`Production file sizes for ${name}:\n`);
+
+          for (const log of statsLog) {
+            logger.log(log);
           }
         }),
       ).catch((err) => {

diff --git a/packages/core/src/types/config/performance.ts b/packages/core/src/types/config/performance.ts
@@ -13,6 +13,7 @@ export type BuildCacheOptions = {
 export type PrintFileSizeOptions = {
   total?: boolean;
   detail?: boolean;
+  compressed?: boolean;
 };
 
 export interface PreconnectOption {

diff --git a/website/docs/en/config/performance/print-file-size.mdx b/website/docs/en/config/performance/print-file-size.mdx
@@ -13,6 +13,10 @@ type PrintFileSizeOptions =
        * whether to print size of each file
        */
       detail?: boolean;
+      /**
+       * whether to print gzip-compressed size
+       */
+      compressed?: boolean;
     }
   | boolean;
 ```
@@ -21,7 +25,9 @@ type PrintFileSizeOptions =
 
 Whether to print the file sizes after production build.
 
-If it is a Boolean type, it will be decided according to the config whether to print the file sizes. The default output is as follows.
+## Default Outputs
+
+The default output log is as follows:
 
 ```bash
 info    Production file sizes:
@@ -36,9 +42,23 @@ info    Production file sizes:
   Gzipped size:  46.5 kB
 ```
 
-You can also configure whether to print the sum of the size of all static resource files and whether to print the size of each static resource file through the Object type.
+## Disable Outputs
 
-If you don't want to print the size of each static resource file, you can:
+If you don't want to print any information, you can disable it by setting `printFileSize` to `false`:
+
+```ts
+export default {
+  performance: {
+    printFileSize: false,
+  },
+};
+```
+
+## Custom Outputs
+
+You can customize the output format through the options.
+
+- If you don't need to output the size of each static asset, you can set `detail` to false. In this case, only the total size will be output:
 
 ```ts
 export default {
@@ -50,12 +70,14 @@ export default {
 };
 ```
 
-If you don't want to print any information, you can disable it by setting `printFileSize` to `false`:
+- If you don't need to output the gzipped size, you can set `compressed` to false. This can save some gzip computation time for large projects:
 
 ```ts
 export default {
   performance: {
-    printFileSize: false,
+    printFileSize: {
+      compressed: false,
+    },
   },
 };
 ```
diff --git a/website/docs/zh/config/performance/print-file-size.mdx b/website/docs/zh/config/performance/print-file-size.mdx
@@ -13,6 +13,10 @@ type PrintFileSizeOptions =
        * 是否输出每个静态资源文件的体积
        */
       detail?: boolean;
+      /**
+       * 是否输出 gzip 压缩后的体积
+       */
+      compressed?: boolean;
     }
   | boolean;
 ```
@@ -21,7 +25,9 @@ type PrintFileSizeOptions =
 
 是否在生产环境构建后输出所有静态资源文件的体积。
 
-如果是 Boolean 类型，将根据配置决定是否输出所有静态资源文件的体积，默认输出如下。
+## 默认输出
+
+默认输出的日志如下：
 
 ```bash
 info    Production file sizes:
@@ -36,9 +42,23 @@ info    Production file sizes:
   Gzipped size:  46.5 kB
 ```
 
-你也可以通过 Object 类型分别对输出所有静态资源文件的体积和以及输出每个静态资源文件的体积进行配置。
+## 禁用输出
 
-如果你不想输出每个静态资源文件的体积，可以：
+如果不需要输出任何信息，可以将 `printFileSize` 置为 `false` 将其禁用：
+
+```ts
+export default {
+  performance: {
+    printFileSize: false,
+  },
+};
+```
+
+## 自定义输出
+
+你可以通过选项来自定义输出的格式。
+
+- 如果不需要输出每个静态资源文件的体积，可以把 `detail` 设置为 false，此时仅输出总体积：
 
 ```ts
 export default {
@@ -50,12 +70,14 @@ export default {
 };
 ```
 
-如果你不想输出任何信息，可以将 `printFileSize` 置为 `false` 将其禁用掉：
+- 如果不需要输出 gzip 压缩后的体积，可以把 `compressed` 设置为 false，这在大型项目中可以节省一些 gzip 计算的耗时：
 
 ```ts
 export default {
   performance: {
-    printFileSize: false,
+    printFileSize: {
+      compressed: false,
+    },
   },
 };
 ```