#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 and configure minimizer options.

By default, JS and CSS code are automatically minified 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 code minification behavior through detailed configuration of the minify option. Each configuration option is explained below:

#Example

#Disable minification

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

export default {
  output: {
    minify: false,
  },
};

#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, disable JavaScript minification:

export default {
  output: {
    minify: {
      js: false,
    },
  },
};

Enable JavaScript minification in both development and production mode:

export default {
  output: {
    minify: {
      js: 'always',
    },
  },
};

#minify.jsOptions

• Type: Rspack.SwcJsMinimizerRspackPluginOptions
• Default: {}

output.minify.jsOptions is used to configure SWC's minification options. For detailed configurations, please refer to SwcJsMinimizerRspackPlugin.

For example, disable the mangle feature:

export default {
  output: {
    minify: {
      jsOptions: {
        minimizerOptions: {
          mangle: false,
        },
      },
    },
  },
};

Refer to Configure SWC for more details.

#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:

export default {
  output: {
    minify: {
      css: false,
    },
  },
};

Enable CSS minification in both development and production mode:

export default {
  output: {
    minify: {
      css: 'always',
    },
  },
};

#minify.cssOptions

• Type: Rspack.LightningcssMinimizerRspackPluginOptions
• Default: inherit from tools.lightningcssLoader

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

For example, disable error recovery:

export default {
  output: {
    minify: {
      cssOptions: {
        minimizerOptions: {
          errorRecovery: false,
        },
      },
    },
  },
};

#Switching minifier

#JS minifier

If the default SWC minifier does not meet your needs, you can switch to other minifiers through the tools.bundlerChain option.

For example, use terser-webpack-plugin to switch to Terser or esbuild.

• Use terser to minify JS code:

import TerserPlugin from 'terser-webpack-plugin';

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

• Use esbuild to minify JS code, you need to install the esbuild package and set esbuildMinify:

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,
        },
      ]);
    },
  },
};