[![npm][npm]][npm-url] [![node][node]][node-url] [![tests][tests]][tests-url] [![cover][cover]][cover-url] [![discussion][discussion]][discussion-url] [![size][size]][size-url]

minimizer-webpack-plugin

This plugin minifies your assets in a webpack build. It ships with several built-in minimizers covering JavaScript, JSON, HTML, and CSS — pick one with the minify option and target the right files with test.

JavaScript minimizers:

• terser — MinimizerPlugin.terserMinify (default). The same JavaScript-based minifier that webpack uses out of the box; produces small, well-tested output and supports the full set of extractComments modes.
• uglify-js — MinimizerPlugin.uglifyJsMinify. ES5-only minifier, useful when you specifically need UglifyJS-compatible output. Requires npm install --save-dev uglify-js.
• @swc/core — MinimizerPlugin.swcMinify. A very fast Rust-based JavaScript/TypeScript minifier. Requires npm install --save-dev @swc/core.
• esbuild — MinimizerPlugin.esbuildMinify. An extremely fast JS bundler/minifier; legal comments are always preserved (no extractComments support). Requires npm install --save-dev esbuild.

JSON minimizer:

• JSON.stringify — MinimizerPlugin.jsonMinify. Built in (no extra dependency); supports space and replacer options.

HTML minimizers:

• html-minifier-terser — MinimizerPlugin.htmlMinifierTerser. The default HTML minimizer. JavaScript-based, no native dependency. Requires npm install --save-dev html-minifier-terser.
• @swc/html — MinimizerPlugin.swcMinifyHtml (full HTML documents) and MinimizerPlugin.swcMinifyHtmlFragment (HTML fragments, e.g. <template> content). Very fast Rust-based platform for the Web. Requires npm install --save-dev @swc/html.
• @minify-html/node — MinimizerPlugin.minifyHtmlNode. A Rust HTML minifier optimised for speed and effectiveness. Requires npm install --save-dev @minify-html/node.

CSS minimizers:

• cssnano — MinimizerPlugin.cssnanoMinify. The default CSS minimizer. Built on top of PostCSS. Requires npm install --save-dev cssnano postcss.
• csso — MinimizerPlugin.cssoMinify. A CSS minifier with structural optimisations. Requires npm install --save-dev csso.
• clean-css — MinimizerPlugin.cleanCssMinify. A widely-used CSS optimiser. Requires npm install --save-dev clean-css.
• esbuild — MinimizerPlugin.esbuildMinifyCss. Very fast CSS minification using esbuild's CSS loader. Requires npm install --save-dev esbuild.
• lightningcss — MinimizerPlugin.lightningCssMinify. A Rust-based CSS parser, transformer, and minifier. Requires npm install --save-dev lightningcss.
• @swc/css — MinimizerPlugin.swcMinifyCss. A very fast Rust-based CSS minifier. Requires npm install --save-dev @swc/css.

All of the non-default minimizers are declared as optional peer dependencies — install only the ones you actually use. You can also stack multiple MinimizerPlugin instances in the same build to handle different file types with different minimizers (see Examples).

Getting Started

Webpack v5 comes with the latest minimizer-webpack-plugin out of the box. If you are using Webpack v5 or above and wish to customize the options, you will still need to install minimizer-webpack-plugin. Using Webpack v4, you have to install terser-webpack-plugin v4 (minimizer-webpack-plugin is only published for Webpack v5+).

To begin, you'll need to install minimizer-webpack-plugin:

npm install minimizer-webpack-plugin --save-dev

or

yarn add -D minimizer-webpack-plugin

or

pnpm add -D minimizer-webpack-plugin

Then add the plugin to your webpack configuration. For example:

webpack.config.js

const MinimizerPlugin = require("minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new MinimizerPlugin()],
  },
};

Finally, run webpack using the method you normally use (e.g., via CLI or an npm script).

Note about source maps

Works only with source-map, inline-source-map, hidden-source-map and nosources-source-map values for the devtool option.

Why?

• eval wraps modules in eval("string") and the minimizer does not handle strings.
• cheap has no column information and the minimizer generates only a single line, which leaves only a single mapping.

Using supported devtool values enable source map generation.

Options

• test
• include
• exclude
• parallel
• minify
• minimizerOptions
• extractComments

test

Type:

type test = string | RegExp | (string | RegExp)[];

Default: /\.m?js(\?.*)?$/i

Test to match files against.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        test: /\.js(\?.*)?$/i,
      }),
    ],
  },
};

include

Type:

type include = string | RegExp | (string | RegExp)[];

Default: undefined

Files to include.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        include: /\/includes/,
      }),
    ],
  },
};

exclude

Type:

type exclude = string | RegExp | (string | RegExp)[];

Default: undefined

Files to exclude.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        exclude: /\/excludes/,
      }),
    ],
  },
};

parallel

Type:

type parallel = boolean | number;

Default: true

Use multi-process parallel running to improve the build speed.

Default number of concurrent runs: os.cpus().length - 1 or os.availableParallelism() - 1 (if this function is supported).

Note

Parallelization can speedup your build significantly and is therefore highly recommended.

Warning

If you use Circle CI or any other environment that doesn't provide the real available count of CPUs then you need to explicitly set up the number of CPUs to avoid Error: Call retries were exceeded (see #143, #202).

boolean

Enable/disable multi-process parallel running.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        parallel: true,
      }),
    ],
  },
};

number

Enable multi-process parallel running and set number of concurrent runs.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        parallel: 4,
      }),
    ],
  },
};

minify

Type:

type minifyFn = (
  input: Record<string, string>,
  sourceMap: import("@jridgewell/trace-mapping").SourceMapInput | undefined,
  minifyOptions: {
    module?: boolean | undefined;
    ecma?: import("terser").ECMA | undefined;
  },
  extractComments:
    | boolean
    | "all"
    | "some"
    | RegExp
    | ((
        astNode: any,
        comment: {
          value: string;
          type: "comment1" | "comment2" | "comment3" | "comment4";
          pos: number;
          line: number;
          col: number;
        },
      ) => boolean)
    | {
        condition?:
          | boolean
          | "all"
          | "some"
          | RegExp
          | ((
              astNode: any,
              comment: {
                value: string;
                type: "comment1" | "comment2" | "comment3" | "comment4";
                pos: number;
                line: number;
                col: number;
              },
            ) => boolean)
          | undefined;
        filename?: string | ((fileData: any) => string) | undefined;
        banner?:
          | string
          | boolean
          | ((commentsFile: string) => string)
          | undefined;
      }
    | undefined,
) => Promise<{
  code: string;
  map?: import("@jridgewell/trace-mapping").SourceMapInput | undefined;
  errors?: (string | Error)[] | undefined;
  warnings?: (string | Error)[] | undefined;
  extractedComments?: string[] | undefined;
}>;

type minify = minifyFn | minifyFn[];

Default: MinimizerPlugin.terserMinify

Allows you to override the default minify function. By default plugin uses terser package. Useful for using and testing unpublished versions or forks.

An array of functions can also be provided. Each minimizer can expose a filter(name, info) helper that decides whether it should run on a given asset; the plugin dispatches each asset only to the minimizers whose filter accepts it (or runs them all when no filter is set). All built-in minimizers ship with a filter that matches their natural extension, so a single plugin instance and a single worker pool can handle JS, CSS, HTML and JSON together without juggling multiple MinimizerPlugin instances — just widen test to let those asset types reach the dispatcher:

new MinimizerPlugin({
  test: /\.(?:[cm]?js|css|html?|json)(\?.*)?$/i,
  minify: [
    MinimizerPlugin.terserMinify,
    MinimizerPlugin.cssnanoMinify,
    MinimizerPlugin.htmlMinifierTerser,
    MinimizerPlugin.jsonMinify,
  ],
});

When more than one minimizer in the array claims the same asset, the chain semantic still applies: the output of each accepting minimizer is fed as input to the next. The minimizerOptions option may be an array (index-paired with minify) or a single object reused by every minimizer.

The test option always defaults to /\.[cm]?js(\?.*)?$/i. When you mix asset types in a single plugin instance, widen test so non-JS assets reach the dispatcher (for example test: /\.(?:[cm]?js|css|html?|json)(\?.*)?$/i).

Warning

Always use require inside minify function when parallel option enabled.

function

webpack.config.js

// Can be async
const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
  // The `minimizerOptions` argument contains options from the `minimizerOptions` plugin option
  // You can use `minimizerOptions.myCustomOption`

  // Custom logic for extract comments
  const { map, code } = require("uglify-module") // Or require('./path/to/uglify-module')
    .minify(input, {
      /* Your options for minification */
    });

  return { map, code, warnings: [], errors: [], extractedComments: [] };
};

// Used to regenerate `fullhash`/`chunkhash` between different implementation
// Example: you fix a bug in custom minimizer/custom function, but unfortunately webpack doesn't know about it, so you will get the same fullhash/chunkhash
// to avoid this you can provide version of your custom minimizer
// You don't need if you use only `contenthash`
minify.getMinimizerVersion = () => {
  let packageJson;

  try {
    packageJson = require("uglify-module/package.json");
  } catch (error) {
    // Ignore
  }

  return packageJson && packageJson.version;
};

// Restrict the minimizer to the assets it can actually handle. The plugin
// skips assets for which `filter` returns `false` and (when an array of
// minimizers is used) dispatches each asset only to the minimizers that
// accept it. Returning `undefined` is treated as accept.
minify.filter = (name) => /\.[cm]?js(\?.*)?$/i.test(name);

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        minimizerOptions: {
          myCustomOption: true,
        },
        minify,
      }),
    ],
  },
};

array

If an array of functions is passed to the minify option, each asset is dispatched to the minimizers whose filter accepts it. When more than one minimizer accepts the same asset the output of each is fed as input to the next one (the chain semantic). The minimizerOptions option can be either an array of option objects (index-paired with minify) or a single object that will be shared by all minimizers. Warnings, errors and extracted comments from all running minimizers are merged together.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new MinimizerPlugin({
        minify: [MinimizerPlugin.terserMinify, MinimizerPlugin.swcMinify],
        // `minimizerOptions` can be an array of options, one per `minify` entry
        minimizerOptions: [
          // Options for `MinimizerPlugin.terserMinify`
          { mangle: false },
          // Options for `MinimizerPlugin.swcMinify`
          {},
        ],
      }),
    ],
  },
};

A single plugin instance can also handle multiple asset types — the built-in minimizers each ship with a filter matching their natural extension, so JS, CSS, HTML and JSON can all be minified by one shared worker pool:

``js module.exports = { optimization: { minimize: true, minimizer: [ new MinimizerPlugin({ //test` stil