#performance.printFileSize

• Type:

type PrintFileSizeOptions =
  | boolean
  | {
      total?: boolean | Function;
      detail?: boolean;
      compressed?: boolean;
      include?: (asset: PrintFileSizeAsset) => boolean;
      exclude?: (asset: PrintFileSizeAsset) => boolean;
    };

• Default: true

Whether to print the file sizes after production build.

#Default outputs

The default output log is as follows:

  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:   143.0 kB    46.3 kB

#Disable outputs

If you do not want to print any information, you can disable it by setting printFileSize to false:

export default {
  performance: {
    printFileSize: false,
  },
};

#Options

You can customize the output format through the options.

#total

• Type:

type Total =
  | boolean
  | ((params: {
      environmentName: string;
      distPath: string;
      assets: PrintFileSizeAsset[];
      totalSize: number;
      totalGzipSize: number;
    }) => string);

• Default: true

Whether to output the total size of all static assets, or provide a function to customize the output format of the total size.

When set to false, the total size will not be output:

export default {
  performance: {
    printFileSize: {
      total: false,
    },
  },
};

When set to a function, you can customize the total size output format:

export default {
  performance: {
    printFileSize: {
      total: ({ distPath, assets, totalSize }) => {
        return `Generated ${assets.length} files in ${distPath}, the total size is ${(totalSize / 1000).toFixed(1)} kB.`;
      },
    },
  },
};

Function parameters:

• environmentName: The unique name of the current environment, used to distinguish and locate the environment
• distPath: The output directory relative to the project root
• assets: Array of static assets, each containing name and size properties
• totalSize: Total size of all static assets in bytes
• totalGzipSize: Total gzip-compressed size of all static assets in bytes

#detail

• Type: boolean
• Default: true

Whether to output the size of each static asset.

If you do not 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:

export default {
  performance: {
    printFileSize: {
      detail: false,
    },
  },
};

#compressed

• Type: boolean
• Default: false when output.target is node, otherwise true

Whether to output the gzip-compressed size of each static asset.

If you do not need to view the gzipped size, you can set compressed to false. This can save some gzip computation time for large projects:

export default {
  performance: {
    printFileSize: {
      compressed: false,
    },
  },
};

#include

• Type:

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:

export default {
  performance: {
    printFileSize: {
      include: (asset) => asset.size > 10 * 1000,
    },
  },
};

Or only output .js files larger than 10kB:

export default {
  performance: {
    printFileSize: {
      include: (asset) => /\.js$/.test(asset.name) && asset.size > 10 * 1000,
    },
  },
};

#exclude

• Type:

type Exclude = (asset: PrintFileSizeAsset) => boolean;

• Default: (asset) => /\.(?:map|LICENSE\.txt|d\.ts)$/.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, license files, and .d.ts type files, as these files do not affect page load performance.

For example, exclude .html files in addition to the default:

export default {
  performance: {
    printFileSize: {
      exclude: (asset) =>
        /\.(?:map|LICENSE\.txt)$/.test(asset.name) ||
        /\.html$/.test(asset.name),
    },
  },
};