> For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt.

# output.minify

- **Type:**

```ts
type Minify =
  | boolean
  | {
      js?: boolean | 'always';
      jsOptions?:
        SwcJsMinimizerRspackPluginOptions | SwcJsMinimizerRspackPluginOptions[];
      css?: boolean | 'always';
      cssOptions?:
        | LightningCssMinimizerRspackPluginOptions
        | LightningCssMinimizerRspackPluginOptions[];
    };
```

- **Default:**
  - `true` when [output.target](/config/output/target.md) is `web` or `web-worker`.
  - `false` when [output.target](/config/output/target.md) is `node`.

Controls whether code minification is enabled, and provides configuration options for the minimizers.

By default, production builds for the `web` and `web-worker` targets automatically minify JavaScript and CSS to improve runtime performance. For the `node` target, minification is not enabled by default in production builds unless explicitly opted in.

To disable minification entirely, set `minify` to `false`. You can also fine-tune the behavior and scope of minification through the detailed `minify` configuration options.

:::tip
Rsbuild uses [SWC](/guide/configuration/swc.md) to minify JavaScript code and [Lightning CSS](/guide/styling/css-usage.md#lightning-css) to minify CSS code by default.
:::

## Example

### Enable minification

Enable code minification for the `node` target:

```ts title="rsbuild.config.ts"
export default {
  output: {
    target: 'node',
    minify: true,
  },
};
```

### Disable minification

Set `minify` to `false` to disable JavaScript and CSS code minification:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: false,
  },
};
```

:::tip
This helps with debugging and troubleshooting. We don't recommend disabling code minification in production builds, as it significantly impacts page performance.
:::

## Options

### minify.js

- **Type:** `boolean | 'always'`
- **Default:** `true`

Whether to enable minification for JavaScript bundles:

- `true`: Enabled in production mode.
- `false`: Disabled in all modes.
- `'always'`: Enabled in all modes.

For example, to disable JavaScript minification:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: {
      js: false,
    },
  },
};
```

To enable JavaScript minification in both development and production mode:

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

### minify.jsOptions

- **Type:** `SwcJsMinimizerRspackPluginOptions | SwcJsMinimizerRspackPluginOptions[]`
- **Default:** `{}`

`output.minify.jsOptions` configures SWC's minification options. See [SwcJsMinimizerRspackPlugin](https://rspack.rs/plugins/swc-js-minimizer-rspack-plugin) for detailed configuration options.

For example, disable the mangle feature:

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

> Refer to [Configure SWC](/guide/configuration/swc.md) for more details.

You can pass an array of options to apply different minification settings to different files. Each item registers a separate `SwcJsMinimizerRspackPlugin` instance:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: {
      jsOptions: [
        {
          include: /vendor\.js$/,
          minimizerOptions: {
            mangle: true,
          },
        },
        {
          exclude: /vendor\.js$/,
          minimizerOptions: {
            mangle: false,
          },
        },
      ],
    },
  },
};
```

Each JavaScript asset is minimized only once. If an asset matches multiple items, the first matching item takes effect, so we recommend using mutually exclusive `test`, `include`, or `exclude` conditions.

### minify.css

- **Type:** `boolean | 'always'`
- **Default:** `true`

Whether to enable minification for CSS bundles:

- `true`: Enabled in production mode.
- `false`: Disabled in all modes.
- `'always'`: Enabled in all modes.

For example, disable CSS minification:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: {
      css: false,
    },
  },
};
```

Enable CSS minification in both development and production mode:

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

### minify.cssOptions

- **Type:** `LightningCssMinimizerRspackPluginOptions | LightningCssMinimizerRspackPluginOptions[]`
- **Default:** inherit from [tools.lightningcssLoader](/config/tools/lightningcss-loader.md)

`output.minify.cssOptions` configures Lightning CSS's minification options. See [LightningCssMinimizerRspackPlugin Documentation](https://rspack.rs/plugins/lightning-css-minimizer-rspack-plugin) for detailed configuration options.

For example, disable error recovery:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: {
      cssOptions: {
        minimizerOptions: {
          errorRecovery: false,
        },
      },
    },
  },
};
```

:::tip
When you configure options in [tools.lightningcssLoader](/config/tools/lightningcss-loader.md), `output.minify.cssOptions` will automatically inherit these options, ensuring that CSS code transformation behavior in the development build is consistent with the production build.
:::

You can pass an array of options to apply different minification settings to different files. Each item registers a separate `LightningCssMinimizerRspackPlugin` instance:

```ts title="rsbuild.config.ts"
export default {
  output: {
    minify: {
      cssOptions: [
        {
          include: /foo\.css$/,
          minimizerOptions: {
            unusedSymbols: ['foo-unused'],
          },
        },
        {
          include: /bar\.css$/,
          minimizerOptions: {
            unusedSymbols: ['bar-unused'],
          },
        },
      ],
    },
  },
};
```

Each CSS asset is minimized only once. If an asset matches multiple items, the first matching item takes effect, so we recommend using mutually exclusive `test`, `include`, or `exclude` conditions.

## Switching minifier

### JS minifier

If the default SWC minifier doesn't meet your needs, you can switch to other minifiers using the [tools.bundlerChain](/config/tools/bundler-chain.md) option.

For example, use [minimizer-webpack-plugin](https://github.com/webpack/minimizer-webpack-plugin) to switch to Terser or esbuild.

- Use [terser](https://github.com/terser/terser) to minify JS code:

```ts title="rsbuild.config.ts"
import MinimizerPlugin from 'minimizer-webpack-plugin';

export default {
  tools: {
    bundlerChain(chain, { CHAIN_ID }) {
      chain.optimization.minimizer(CHAIN_ID.MINIMIZER.JS).use(MinimizerPlugin, [
        {
          // options
        },
      ]);
    },
  },
};
```

- Use [esbuild](https://github.com/evanw/esbuild) to minify JS code, you need to install the `esbuild` package and set `esbuildMinify`:

```ts title="rsbuild.config.ts"
import MinimizerPlugin from 'minimizer-webpack-plugin';

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

:::tip
When using a custom JS minifier, the `minify.jsOptions` option will no longer take effect.
:::

## Version history

| Version | Changes                                                   |
| ------- | --------------------------------------------------------- |
| v2.1.8  | Added support for setting `minify.cssOptions` to an array |
| v2.1.7  | Added support for setting `minify.jsOptions` to an array  |
| v2.0.0  | Defaults to `false` for `node` target                     |