#output.minify

• Type:

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

• Default: true

Controls code minification in production mode and configures minimizer options.

By default, JS and CSS code are automatically minified in production mode to improve page performance. To disable minification entirely, set minify to false. You can also control specific minification behavior using the detailed minify options:

#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 configures SWC's minification options. See SwcJsMinimizerRspackPlugin for detailed configuration options.

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 configures Lightning CSS's minification options. See LightningCssMinimizerRspackPlugin Documentation for detailed configuration options.

For example, disable error recovery:

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

#Switching minifier

#JS minifier

If the default SWC minifier doesn't meet your needs, you can switch to other minifiers using 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,
        },
      ]);
    },
  },
};