feat: add printFileSize.exclude option (#4045)

Author: chenjiahan

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

@@ -224,4 +224,23 @@ test.describe('should print file size correctly', async () => {
     expect(logs.some((log) => log.includes('.js'))).toBeTruthy();
     expect(logs.some((log) => log.includes('.css'))).toBeFalsy();
   });
+
+  test('should allow to custom exclude function', async () => {
+    await build({
+      cwd,
+      rsbuildConfig: {
+        performance: {
+          printFileSize: {
+            exclude: (asset) =>
+              /\.(?:map|LICENSE\.txt)$/.test(asset.name) ||
+              /\.html$/.test(asset.name),
+          },
+        },
+      },
+    });
+
+    expect(logs.some((log) => log.includes('index.html'))).toBeFalsy();
+    expect(logs.some((log) => log.includes('.js'))).toBeTruthy();
+    expect(logs.some((log) => log.includes('.css'))).toBeTruthy();
+  });
 });

e2e/cases/print-file-size/basic/src/App.css

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

e2e/cases/print-file-size/basic/src/App.jsx

@@ -1,3 +1,5 @@
+import './App.css';
+
 const App = () => <div id="test">Hello Rsbuild!</div>;
 
 export default App;

packages/core/src/plugins/fileSize.ts

@@ -9,7 +9,12 @@ import zlib from 'node:zlib';
 import { CSS_REGEX, HTML_REGEX, JS_REGEX } from '../constants';
 import { color } from '../helpers';
 import { logger } from '../logger';
-import type { PrintFileSizeOptions, RsbuildPlugin, Rspack } from '../types';
+import type {
+  PrintFileSizeAsset,
+  PrintFileSizeOptions,
+  RsbuildPlugin,
+  Rspack,
+} from '../types';
 
 const gzip = promisify(zlib.gzip);
 
@@ -18,9 +23,9 @@ async function gzipSize(input: Buffer) {
   return data.length;
 }
 
-/** Filter source map and license files */
-export const filterAsset = (asset: string): boolean =>
-  !/\.map$/.test(asset) && !/\.LICENSE\.txt$/.test(asset);
+/** Exclude source map and license files by default */
+export const excludeAsset = (asset: PrintFileSizeAsset): boolean =>
+  /\.(?:map|LICENSE\.txt)$/.test(asset.name);
 
 const getAssetColor = (size: number) => {
   if (size > 300 * 1000) {
@@ -128,15 +133,17 @@ async function printFileSizes(
       groupAssetsByEmitStatus: false,
     });
 
+    const exclude = options.exclude ?? excludeAsset;
     const filteredAssets = origin.assets!.filter((asset) => {
-      if (!filterAsset(asset.name)) {
+      const assetInfo: PrintFileSizeAsset = {
+        name: asset.name,
+        size: asset.size,
+      };
+      if (exclude(assetInfo)) {
         return false;
       }
       if (options.include) {
-        return options.include({
-          name: asset.name,
-          size: asset.size,
-        });
+        return options.include(assetInfo);
       }
       return true;
     });

packages/core/src/types/config.ts

@@ -478,6 +478,12 @@ export type PrintFileSizeOptions = {
    * @default undefined
    */
   include?: (asset: PrintFileSizeAsset) => boolean;
+  /**
+   * A filter function to exclude static assets from the total size or detailed size.
+   * If both `include` and `exclude` are set, `exclude` will take precedence.
+   * @default (asset) => /\.(?:map|LICENSE\.txt)$/.test(asset.name)
+   */
+  exclude?: (asset: PrintFileSizeAsset) => boolean;
 };
 
 export interface PreconnectOption {

packages/core/tests/fileSize.test.ts

@@ -1,13 +1,17 @@
-import { filterAsset } from '../src/plugins/fileSize';
+import { excludeAsset } from '../src/plugins/fileSize';
 
 describe('plugin-file-size', () => {
-  it('#filterAsset - should filter asset correctly', () => {
-    expect(filterAsset('dist/a.js')).toBeTruthy();
-    expect(filterAsset('dist/a.css')).toBeTruthy();
-    expect(filterAsset('dist/a.js.map')).toBeFalsy();
-    expect(filterAsset('dist/b.css.map')).toBeFalsy();
-    expect(filterAsset('dist/a.js.LICENSE.txt')).toBeFalsy();
-    expect(filterAsset('dist/b.css.LICENSE.txt')).toBeFalsy();
-    expect(filterAsset('dist/a.png')).toBeTruthy();
+  it('#excludeAsset - should exclude asset correctly', () => {
+    expect(excludeAsset({ name: 'dist/a.js', size: 1000 })).toBeFalsy();
+    expect(excludeAsset({ name: 'dist/a.css', size: 1000 })).toBeFalsy();
+    expect(excludeAsset({ name: 'dist/a.js.map', size: 1000 })).toBeTruthy();
+    expect(excludeAsset({ name: 'dist/b.css.map', size: 1000 })).toBeTruthy();
+    expect(
+      excludeAsset({ name: 'dist/a.js.LICENSE.txt', size: 1000 }),
+    ).toBeTruthy();
+    expect(
+      excludeAsset({ name: 'dist/b.css.LICENSE.txt', size: 1000 }),
+    ).toBeTruthy();
+    expect(excludeAsset({ name: 'dist/a.png', size: 1000 })).toBeFalsy();
   });
 });

website/docs/en/config/performance/print-file-size.mdx

@@ -139,13 +139,41 @@ export default {
 };
 ```
 
-Or only output `.js` files:
+Or only output `.js` files larger than 10kB:
 
 ```ts
 export default {
   performance: {
     printFileSize: {
-      include: (asset) => /\.js$/.test(asset.name),
+      include: (asset) => /\.js$/.test(asset.name) && asset.size > 10 * 1000,
+    },
+  },
+};
+```
+
+### exclude
+
+- **Type:**
+
+```ts
+type Exclude = (asset: PrintFileSizeAsset) => boolean;
+```
+
+- **Default:** `(asset) => /\.(?:map|LICENSE\.txt)$/.test(asset.name)`
+
+A filter function to determine which static assets to exclude. If both `include` and `exclude` are set, `exclude` will take precedence.
+
+Rsbuild defaults to excluding source map and license files, as these files do not affect page load performance.
+
+For example, exclude `.html` files in addition to the default:
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      exclude: (asset) =>
+        /\.(?:map|LICENSE\.txt)$/.test(asset.name) ||
+        /\.html$/.test(asset.name),
     },
   },
 };

website/docs/zh/config/performance/print-file-size.mdx

@@ -139,13 +139,41 @@ export default {
 };
 ```
 
-或者只输出 `.js` 文件：
+或者只输出体积大于 10kB 的 `.js` 文件：
 
 ```ts
 export default {
   performance: {
     printFileSize: {
-      include: (asset) => /\.js$/.test(asset.name),
+      include: (asset) => /\.js$/.test(asset.name) && asset.size > 10 * 1000,
+    },
+  },
+};
+```
+
+### exclude
+
+- **类型：**
+
+```ts
+type Exclude = (asset: PrintFileSizeAsset) => boolean;
+```
+
+- **默认值：** `(asset) => /\.(?:map|LICENSE\.txt)$/.test(asset.name)`
+
+一个过滤函数，用于确定哪些静态资源需要被排除。如果同时设置了 `include` 和 `exclude`，则 `exclude` 优先级更高。
+
+Rsbuild 默认排除 source map 和 license 文件，因为这些文件不会影响页面加载的性能。
+
+例如，额外再排除 `.html` 文件：
+
+```ts
+export default {
+  performance: {
+    printFileSize: {
+      exclude: (asset) =>
+        /\.(?:map|LICENSE\.txt)$/.test(asset.name) ||
+        /\.html$/.test(asset.name),
     },
   },
 };