feat: add printFileSize.include option (#4044)

web-infra-dev · Nov 23, 2024 · b7d41ab · b7d41ab · rspack-bot · Nov 23, 2024
1 parent e3350e3
commit b7d41ab
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 37 deletions.
diff --git a/e2e/cases/print-file-size/basic/index.test.ts b/e2e/cases/print-file-size/basic/index.test.ts
@@ -103,7 +103,7 @@ test.describe('should print file size correctly', async () => {
     ).toBeTruthy();
   });
 
-  test('printFileSize: false should work', async () => {
+  test('printFileSize: false should not print logs', async () => {
     await build({
       cwd,
       rsbuildConfig: {
@@ -190,4 +190,38 @@ test.describe('should print file size correctly', async () => {
     expect(logs.some((log) => log.includes('Total:'))).toBeTruthy();
     expect(logs.some((log) => log.includes('gzip:'))).toBeFalsy();
   });
+
+  test('should allow to filter assets by name', async () => {
+    await build({
+      cwd,
+      rsbuildConfig: {
+        performance: {
+          printFileSize: {
+            include: (asset) => asset.name.endsWith('.js'),
+          },
+        },
+      },
+    });
+
+    expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('.css'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('.js'))).toBeTruthy();
+  });
+
+  test('should allow to filter assets by size', async () => {
+    await build({
+      cwd,
+      rsbuildConfig: {
+        performance: {
+          printFileSize: {
+            include: (asset) => asset.size > 10 * 1000,
+          },
+        },
+      },
+    });
+
+    expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('.js'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('.css'))).toBeFalsy();
+  });
 });
diff --git a/packages/core/src/plugins/fileSize.ts b/packages/core/src/plugins/fileSize.ts
@@ -128,9 +128,18 @@ async function printFileSizes(
       groupAssetsByEmitStatus: false,
     });
 
-    const filteredAssets = origin.assets!.filter((asset) =>
-      filterAsset(asset.name),
-    );
+    const filteredAssets = origin.assets!.filter((asset) => {
+      if (!filterAsset(asset.name)) {
+        return false;
+      }
+      if (options.include) {
+        return options.include({
+          name: asset.name,
+          size: asset.size,
+        });
+      }
+      return true;
+    });
 
     const distFolder = path.relative(rootPath, distPath);
 
@@ -244,7 +253,7 @@ export const pluginFileSize = (): RsbuildPlugin => ({
 
           const multiStats = 'stats' in stats ? stats.stats : [stats];
 
-          const defaultConfig = {
+          const defaultConfig: PrintFileSizeOptions = {
             total: true,
             detail: true,
             compressed: true,

diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts
@@ -442,6 +442,18 @@ export type BuildCacheOptions = {
   cacheDigest?: Array<string | undefined>;
 };
 
+export type PrintFileSizeAsset = {
+  /**
+   * The name of the asset.
+   * @example 'index.html', 'static/js/index.[hash].js'
+   */
+  name: string;
+  /**
+   * The size of the asset in bytes.
+   */
+  size: number;
+};
+
 export type PrintFileSizeOptions = {
   /**
    * Whether to print the total size of all static assets.
@@ -459,6 +471,13 @@ export type PrintFileSizeOptions = {
    * @default true
    */
   compressed?: boolean;
+  /**
+   * A filter function to determine which static assets to print.
+   * If returned `false`, the static asset will be excluded and not included in the
+   * total size or detailed size.
+   * @default undefined
+   */
+  include?: (asset: PrintFileSizeAsset) => 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
@@ -6,21 +6,10 @@
 type PrintFileSizeOptions =
   | boolean
   | {
-      /**
-       * Whether to print the total size of all static assets.
-       * @default true
-       */
       total?: boolean;
-      /**
-       * Whether to print the size of each static asset.
-       * @default true
-       */
       detail?: boolean;
-      /**
-       * Whether to print the gzip-compressed size of each static asset.
-       * @default true
-       */
       compressed?: boolean;
+      include?: (asset: PrintFileSizeAsset) => boolean;
     };
 ```
 
@@ -32,7 +21,7 @@ Whether to print the file sizes after production build.
 
 The default output log is as follows:
 
-```bash
+```
   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
@@ -54,11 +43,35 @@ export default {
 };
 ```
 
-## Custom Outputs
+## Options
 
 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:
+### total
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Whether to output the total size of all static assets.
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      total: false,
+    },
+  },
+};
+```
+
+### detail
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Whether to output the size of each static asset.
+
+If you don't need to view 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 {
@@ -70,7 +83,14 @@ export default {
 };
 ```
 
-- 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:
+### compressed
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Whether to output the gzip-compressed size of each static asset.
+
+If you don't need to view the gzipped size, you can set `compressed` to false. This can save some gzip computation time for large projects:
 
 ```ts
 export default {
@@ -81,3 +101,52 @@ export default {
   },
 };
 ```
+
+### include
+
+- **Type:**
+
+```ts
+type PrintFileSizeAsset = {
+  /**
+   * The name of the static asset.
+   * @example 'index.html', 'static/js/index.[hash].js'
+   */
+  name: string;
+  /**
+   * The size of the static asset in bytes.
+   */
+  size: number;
+};
+type Include = (asset: PrintFileSizeAsset) => boolean;
+```
+
+- **Default:** `undefined`
+
+A filter function to determine which static assets to print.
+
+If returned `false`, the static asset will be excluded and not included in the total size or detailed size.
+
+For example, only output static assets larger than 10kB:
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      include: (asset) => asset.size > 10 * 1000,
+    },
+  },
+};
+```
+
+Or only output `.js` files:
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      include: (asset) => /\.js$/.test(asset.name),
+    },
+  },
+};
+```
diff --git a/website/docs/zh/config/performance/print-file-size.mdx b/website/docs/zh/config/performance/print-file-size.mdx
@@ -6,21 +6,10 @@
 type PrintFileSizeOptions =
   | boolean
   | {
-      /**
-       * 是否输出所有静态资源的总体积
-       * @default true
-       */
       total?: boolean;
-      /**
-       * 是否输出每个静态资源的体积
-       * @default true
-       */
       detail?: boolean;
-      /**
-       * 是否输出 gzip 压缩后的体积
-       * @default true
-       */
       compressed?: boolean;
+      include?: (asset: PrintFileSizeAsset) => boolean;
     };
 ```
 
@@ -32,7 +21,7 @@ type PrintFileSizeOptions =
 
 默认输出的日志如下：
 
-```bash
+```
   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
@@ -54,11 +43,35 @@ export default {
 };
 ```
 
-## 自定义输出
+## 选项
 
 你可以通过选项来自定义输出的格式。
 
-- 如果不需要输出每个静态资源文件的体积，可以把 `detail` 设置为 false，此时仅输出总体积：
+### total
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+是否输出所有静态资源的总体积。
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      total: false,
+    },
+  },
+};
+```
+
+### detail
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+是否输出每个静态资源的体积。
+
+如果你不需要查看每个静态资源文件的体积，可以把 `detail` 设置为 false，此时仅输出总体积：
 
 ```ts
 export default {
@@ -70,7 +83,14 @@ export default {
 };
 ```
 
-- 如果不需要输出 gzip 压缩后的体积，可以把 `compressed` 设置为 false，这在大型项目中可以节省一些 gzip 计算的耗时：
+### compressed
+
+- **类型：** `boolean`
+- **默认值：** `true`
+
+是否输出 gzip 压缩后的体积。
+
+如果你不需要查看 gzip 压缩后的体积，可以把 `compressed` 设置为 false，这在大型项目中可以节省一些 gzip 计算的耗时：
 
 ```ts
 export default {
@@ -81,3 +101,52 @@ export default {
   },
 };
 ```
+
+### include
+
+- **类型：**
+
+```ts
+type PrintFileSizeAsset = {
+  /**
+   * 静态资源名称
+   * @example 'index.html', 'static/js/index.[hash].js'
+   */
+  name: string;
+  /**
+   * 静态资源体积，单位为 bytes
+   */
+  size: number;
+};
+type Include = (asset: PrintFileSizeAsset) => boolean;
+```
+
+- **默认值：** `undefined`
+
+一个过滤函数，用于确定哪些静态资源需要输出。
+
+如果返回 `false`，则该静态资源将被排除，不会被包含在总体积或详细体积中。
+
+例如，只输出体积大于 10kB 的静态资源：
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      include: (asset) => asset.size > 10 * 1000,
+    },
+  },
+};
+```
+
+或者只输出 `.js` 文件：
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      include: (asset) => /\.js$/.test(asset.name),
+    },
+  },
+};
+```
suite	result
modernjs	❌ failure
plugins	✅ success
rspress	✅ success
rslib	✅ success
examples	✅ success