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
  • 默认值: mode === 'production'

是否开启对 JavaScript 代码的压缩。

例如禁用 JavaScript 压缩:

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

minify.jsOptions

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

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

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

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

参考 配置 SWC 了解更多。

minify.css

  • 类型: boolean
  • 默认值: mode === 'production'

是否开启对 CSS 代码的压缩。

例如禁用 CSS 压缩:

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

minify.cssOptions

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 选项将不再生效。