output.minify

  • Type:
type Minify =
  | boolean
  | {
      js?: boolean;
      jsOptions?: Rspack.SwcJsMinimizerRspackPluginOptions;
      css?: boolean;
      cssOptions?: Rspack.LightningcssMinimizerRspackPluginOptions;
    };
  • Default: true

Configure whether to enable code minification in production mode, or to configure minimizer options.

By default, JS and CSS code will be automatically minimized in production mode to improve page performance. If you do not want to minify the code, you can set minify to false to disable minification for all code. Alternatively, you can control the behavior of code minification through detailed configuration of the minify option. Below are detailed explanations for each configuration option:

Example

Disable minification

Set minify to false to disable JS and CSS code minification:

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

This usage is usually used for debugging and troubleshooting. It is not recommended to disable code minification in production builds, as it will significantly degrade the page performance.

Options

minify.js

  • Type: boolean
  • Default: mode === 'production'

Whether to enable minification for JavaScript code.

For example, disable JavaScript minification:

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

minify.jsOptions

  • Type: Rspack.SwcJsMinimizerRspackPluginOptions
  • Default: {}

output.minify.jsOptions is used to configure SWC's minification options. For detailed configurations, please refer to SwcJsMinimizerRspackPlugin. The following configuration will override the default settings, disable the mangle feature.

For example, disable the mangle feature:

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

Refer to Configure SWC for more details.

minify.css

  • Type: boolean
  • Default: mode === 'production'

Whether to enable minification for CSS code.

For example, disable CSS minification:

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

minify.cssOptions

output.minify.cssOptions is used to configure Lightning CSS's minification options. For specific configuration items, please refer to LightningCssMinimizerRspackPlugin Documentation.

For example, disable error recovery:

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

When you configure some options in tools.lightningcssLoader, output.minify.cssOptions will automatically inherit these options, which ensures that the CSS code transformation behavior in the development build is consistent with that in the production build.