close
logologo
指南
配置
插件
API
社区
版本
更新日志
Rsbuild 0.x 文档
English
简体中文
指南
配置
插件
API
社区
更新日志
Rsbuild 0.x 文档
English
简体中文
logologo
Overview
root
mode
plugins
logLevel
environments

dev

dev.assetPrefix
dev.browserLogs
dev.cliShortcuts
dev.client
dev.hmr
dev.lazyCompilation
dev.liveReload
dev.progressBar
dev.setupMiddlewares
dev.watchFiles
dev.writeToDisk

resolve

resolve.aliasStrategy
resolve.alias
resolve.conditionNames
resolve.dedupe
resolve.extensions
resolve.mainFields

source

source.assetsInclude
source.decorators
source.define
source.entry
source.exclude
source.include
source.preEntry
source.transformImport
source.tsconfigPath

output

output.assetPrefix
output.charset
output.cleanDistPath
output.copy
output.cssModules
output.dataUriLimit
output.distPath
output.emitAssets
output.emitCss
output.externals
output.filenameHash
output.filename
output.injectStyles
output.inlineScripts
output.inlineStyles
output.legalComments
output.manifest
output.minify
output.module
output.overrideBrowserslist
output.polyfill
output.sourceMap
output.target

html

html.appIcon
html.crossorigin
html.favicon
html.inject
html.meta
html.mountId
html.outputStructure
html.scriptLoading
html.tags
html.templateParameters
html.template
html.title

server

server.base
server.compress
server.cors
server.headers
server.historyApiFallback
server.host
server.htmlFallback
server.https
server.middlewareMode
server.open
server.port
server.printUrls
server.proxy
server.publicDir
server.strictPort

security

security.nonce
security.sri

tools

tools.bundlerChain
tools.cssExtract
tools.cssLoader
tools.htmlPlugin
tools.lightningcssLoader
tools.postcss
tools.rspack
tools.styleLoader
tools.swc

performance

performance.buildCache
performance.bundleAnalyze
performance.chunkSplit
performance.dnsPrefetch
performance.preconnect
performance.prefetch
performance.preload
performance.printFileSize
performance.profile
performance.removeConsole
performance.removeMomentLocale

moduleFederation

moduleFederation.options
📝 在 GitHub 上编辑此页
上一页performance.preload
下一页performance.profile

#performance.printFileSize

  • 类型:
type PrintFileSizeOptions =
  | boolean
  | {
      total?: boolean | Function;
      detail?: boolean;
      compressed?: boolean;
      include?: (asset: PrintFileSizeAsset) => boolean;
      exclude?: (asset: PrintFileSizeAsset) => boolean;
    };
  • 默认值: true

是否在生产模式构建后输出所有静态资源文件的体积。

#默认输出

默认输出的日志如下:

  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

#禁用输出

如果不需要输出任何信息,可以将 printFileSize 置为 false 将其禁用:

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

#选项

你可以通过选项来自定义输出的格式。

#total

  • 类型:
type Total =
  | boolean
  | ((params: {
      environmentName: string;
      distPath: string;
      assets: PrintFileSizeAsset[];
      totalSize: number;
      totalGzipSize: number;
    }) => string);
  • 默认值: true

是否输出所有静态资源的总体积,或者提供一个函数来自定义总体积的输出格式。

当设置为 false 时,不输出总体积信息:

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

如果本次构建只生成了一个静态资源,则不会输出总体积。

当设置为函数时,可以自定义总体积的输出格式:

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

函数参数说明:

  • environmentName: 当前环境的唯一名称,用于区分和定位该环境
  • distPath: 输出目录相对于项目根目录的路径
  • assets: 静态资源列表,每个资源包含 name 和 size 属性
  • totalSize: 所有静态资源的体积
  • totalGzipSize: 所有静态资源 gzip 压缩后的体积

#detail

  • 类型: boolean
  • 默认值: true

是否输出每个静态资源的体积。

如果你不需要查看每个静态资源文件的体积,可以把 detail 设置为 false,此时仅输出总体积:

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

#compressed

  • 类型: boolean
  • 默认值: 当 output.target 为 node 时为 false,否则为 true

是否输出 gzip 压缩后的体积。

如果你不需要查看 gzip 压缩后的体积,可以把 compressed 设置为 false,这在大型项目中可以节省一些 gzip 计算的耗时:

export default {
  performance: {
    printFileSize: {
      compressed: false,
    },
  },
};
TIP
  • 该数据仅用于参考 gzip 压缩后的体积,Rsbuild 并不会对静态资源开启 gzip 压缩。通常,你需要在服务器端开启 gzip 压缩,例如使用 nginx 的 gzip 模块。
  • 对于不适合 gzip 压缩的静态资源(如图片文件),在详细列表中不会显示其 gzip 体积,但在计算 gzip 后的总体积时会包含这些资源的原始大小。

#include

  • 类型:
type PrintFileSizeAsset = {
  /**
   * 静态资源名称
   * @example 'index.html', 'static/js/index.[hash].js'
   */
  name: string;
  /**
   * 静态资源体积,单位为 bytes
   */
  size: number;
};
type Include = (asset: PrintFileSizeAsset) => boolean;
  • 默认值: undefined

一个过滤函数,用于确定哪些静态资源需要输出。

如果返回 false,则该静态资源将被排除,不会被包含在总体积或详细体积中。

例如,只输出体积大于 10kB 的静态资源:

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

或者只输出体积大于 10kB 的 .js 文件:

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

#exclude

  • 类型:
type Exclude = (asset: PrintFileSizeAsset) => boolean;
  • 默认值: (asset) => /\.(?:map|LICENSE\.txt|d\.ts)$/.test(asset.name)

一个过滤函数,用于确定哪些静态资源需要被排除。如果同时设置了 include 和 exclude,则 exclude 优先级更高。

Rsbuild 默认排除 source map、许可证文件和 .d.ts 类型文件,因为这些文件不会影响页面加载的性能。

例如,额外再排除 .html 文件:

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