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 上编辑此页
上一页output.manifest
下一页output.module

#output.minify

  • 类型:
type Minify =
  | boolean
  | {
      js?: boolean;
      jsOptions?: Rspack.SwcJsMinimizerRspackPluginOptions;
      css?: boolean;
      cssOptions?: Rspack.LightningcssMinimizerRspackPluginOptions;
    };
  • 默认值: true

用于设置是否在生产模式下开启代码压缩,以及配置压缩工具的选项。

默认情况下,JS 和 CSS 代码会在生产模式构建时被自动压缩,从而提升页面性能。如果你不希望执行代码压缩,可以将 minify 设置为 false 关闭对所有代码的压缩。或者可以通过 minify 选项的详细配置来控制代码压缩的行为。

TIP

Rsbuild 默认使用 SWC 压缩 JS 代码,使用 Lightning CSS 压缩 CSS 代码。

#示例

#禁用压缩

将 minify 设置为 false 可以禁用 JS 和 CSS 代码的压缩:

rsbuild.config.ts
export default {
  output: {
    minify: false,
  },
};
TIP

该用法通常用于代码调试和问题排查,不建议在生产模式禁用代码压缩,否则会导致页面性能显著下降。

#选项

#minify.js

  • 类型: boolean
  • 默认值: true

是否在开启对 JavaScript 代码的压缩:

  • true: 在生产模式下开启压缩。
  • false: 在所有模式下禁用压缩。
  • 'always': 在所有模式下开启压缩。

例如禁用 JavaScript 压缩:

rsbuild.config.ts
export default {
  output: {
    minify: {
      js: false,
    },
  },
};

在开发和生产模式下开启 JavaScript 压缩:

rsbuild.config.ts
export default {
  output: {
    minify: {
      js: 'always',
    },
  },
};

#minify.jsOptions

  • 类型: Rspack.SwcJsMinimizerRspackPluginOptions
  • 默认值: {}

output.minify.jsOptions 用于配置 SWC 的压缩选项,具体配置项请参考 SwcJsMinimizerRspackPlugin 文档。

例如,关闭变量和函数名的重命名:

rsbuild.config.ts
export default {
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          mangle: false,
        },
      },
    },
  },
};

参考 配置 SWC 了解更多。

#minify.css

  • 类型: boolean
  • 默认值: true

是否在开启对 CSS 代码的压缩:

  • true: 在生产模式下开启压缩。
  • false: 在所有模式下禁用压缩。
  • 'always': 在所有模式下开启压缩。

例如禁用 CSS 压缩:

rsbuild.config.ts
export default {
  output: {
    minify: {
      css: false,
    },
  },
};

在开发和生产模式下开启 CSS 压缩:

rsbuild.config.ts
export default {
  output: {
    minify: {
      css: 'always',
    },
  },
};

#minify.cssOptions

  • 类型: Rspack.LightningcssMinimizerRspackPluginOptions
  • 默认值: 继承 tools.lightningcssLoader 的值

output.minify.cssOptions 用于配置 Lightning CSS 的压缩选项,具体配置项请参考 LightningCssMinimizerRspackPlugin 文档。

例如,关闭 errorRecovery 选项:

rsbuild.config.ts
export default {
  output: {
    minify: {
      cssOptions: {
        minimizerOptions: {
          errorRecovery: false,
        },
      },
    },
  },
};
TIP

当你在 tools.lightningcssLoader 中配置了一些选项时,output.minify.cssOptions 会自动继承这些选项,这样可以确保开发环境和生产环境的 CSS 代码转换行为保持一致。

#切换压缩器

#JS 压缩器

如果默认的 SWC 压缩器无法满足你的需求,你可以通过 tools.bundlerChain 选项来切换到其他压缩器。

例如,使用 terser-webpack-plugin 插件来切换到 Terser 或 esbuild。

  • 使用 terser 压缩 JS 代码:
rsbuild.config.ts
import TerserPlugin from 'terser-webpack-plugin';

export default {
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.optimization.minimizer(CHAIN_ID.MINIMIZER.JS).use(TerserPlugin, [
        {
          // options
        },
      ]);
    },
  },
};
  • 使用 esbuild 压缩 JS 代码时,需要安装 esbuild 包,并设置 esbuildMinify:
rsbuild.config.ts
import TerserPlugin from 'terser-webpack-plugin';

export default {
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.optimization.minimizer(CHAIN_ID.MINIMIZER.JS).use(TerserPlugin, [
        {
          minify: TerserPlugin.esbuildMinify,
        },
      ]);
    },
  },
};
TIP

在使用自定义的 JS 压缩器时,minify.jsOptions 选项将不再生效。