Front-end Notes - TerserWebpackPlugin Configuration

1. Reference documents

TerserWebpackPlugin Reference Documentation

2. Install

npm install terser-webpack-plugin --save-dev

3. Webpack configuration example

webpack.config.js

const TerserPlugin = require("terser-webpack-plugin");

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

4. Option Description

option name	type	Defaults	describe
test	String\|RegExp\|Array<String\|RegExp>	/.m?js(?.*)?$/i	Used to match files that need to be compressed.
include	String\|RegExp\|Array<String\|RegExp>	undefined	Matches files that participated in compression.
exclude	String\|RegExp\|Array<String\|RegExp>	undefined	Matches files that do not need to be compressed.
parallel	Boolean\|Number	true	Use multiple processes to run concurrently to increase build speed.
minify	Function	TerserPlugin. terserMinify	Allows you to customize the compression function.
terserOptions	Object	default	Terser's minify option.
extractComments	Boolean\|String\|RegExp\|Function<(node, comment) -> Boolean\|Object>\|Object	true	Whether comments need to be extracted into a separate file.

5. Parameter usage examples

5.1 test

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

5.2 include

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

5.3 exclude

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

5.4 parallel

5.4.1 Boolean

Enable/disable multi-process concurrent running function.

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

5.4.2 Number

Enable multiple processes to run concurrently and set the number of concurrent runs.

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

5.5 minify

When the parallel option is enabled, only require can be used inside minify functions.

// Can be async
const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
  // The `minimizerOptions` option contains option from the `terserOptions` 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 {
    // eslint-disable-next-line global-require, import/no-extraneous-dependencies
    packageJson = require("uglify-module/package.json");
  } catch (error) {
    // Ignore
  }

  return packageJson && packageJson.version;
};

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

5.6 terserOptions

Terser configuration items .

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          parse: {},
          compress: {},
          mangle: true, // Note `mangle.properties` is `false` by default.
          module: false,
          // Deprecated
          output: null,
          format: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: false,
          safari10: false,
        },
      }),
    ],
  },
};

5.7 extractComments

5.7.1 Boolean

Enable/disable stripping of comments.

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

5.7.2 String

Strip all or some (matched with /^**!|@preserve|@license|@cc_on/i regex) comments.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: "all",
      }),
    ],
  },
};

5.7.3 RegExp

All comments matching the specified expression will be stripped into separate files.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: /@extract/i,
      }),
    ],
  },
};

5.7.4 Function<(node, comment) -> Boolean>

All comments matching the specified expression will be stripped into separate files.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: (astNode, comment) => {
          if (/@extract/i.test(comment.value)) {
            return true;
          }

          return false;
        },
      }),
    ],
  },
};

5.7.5 Object

Allows customizing the conditions for stripping comments, specifying stripped filenames and titles.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: /^\**!|@preserve|@license|@cc_on/i,
          filename: (fileData) => {
            // The "fileData" argument contains object with "filename", "basename", "query" and "hash"
            return `${fileData.filename}.LICENSE.txt${fileData.query}`;
          },
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
    ],
  },
};

5.7.6 condition

Customize the annotations that need to be stripped.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: "some",
          filename: (fileData) => {
            // The "fileData" argument contains object with "filename", "basename", "query" and "hash"
            return `${fileData.filename}.LICENSE.txt${fileData.query}`;
          },
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
    ],
  },
};

5.7.7 filename

Using js / cjs / mjs extensions may conflict with existing resource files, causing code to run incorrectly.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: /^\**!|@preserve|@license|@cc_on/i,
          filename: "extracted-comments.js",
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
    ],
  },
};

5.7.8 banner

Banner text pointing to the stripped file will be added on top of the original file. Can be false (no title), String or a function: Function<(string) -> String> , which will be called with the filename where the stripped comments are stored. Tagline content will be incorporated into the notes.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: true,
          filename: (fileData) => {
            // The "fileData" argument contains object with "filename", "basename", "query" and "hash"
            return `${fileData.filename}.LICENSE.txt${fileData.query}`;
          },
          banner: (commentsFile) => {
            return `My custom banner about license information ${commentsFile}`;
          },
        },
      }),
    ],
  },
};

6. Quick configuration

6.1 Keep comments

Strips all valid comments (ie /^**!|@preserve|@license|@cc_on/i ) and preserves /@license/i comments.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: /@license/i,
          },
        },
        extractComments: true,
      }),
    ],
  },
};

6.2 Delete comments

If you want to strip comments at build time, use the following configuration:

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),
    ],
  },
};

6.3 uglify-js

UglifyJS is a JavaScript parser, compressor, and beautifier in one tool set.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.uglifyJsMinify,
        // `terserOptions` options will be passed to `uglify-js`
        // Link to options - https://github.com/mishoo/UglifyJS#minify-options
        terserOptions: {},
      }),
    ],
  },
};

6.4 swc

swc is an ultra-fast compiler written in rust; it can generate widely used JavaScript from the latest standard and TypeScript syntax.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.swcMinify,
        // `terserOptions` options will be passed to `swc` (`@swc/core`)
        // Link to options - https://swc.rs/docs/config-js-minify
        terserOptions: {},
      }),
    ],
  },
};

6.5 esbuild

esbuild is a very fast JavaScript bundler and minifier.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: TerserPlugin.esbuildMinify,
        // `terserOptions` options will be passed to `esbuild`
        // Link to options - https://esbuild.github.io/api/#minify
        // Note: the `minify` options is true by default (and override other `minify*` options), so if you want to disable the `minifyIdentifiers` option (or other `minify*` options) please use:
        // terserOptions: {
        //   minify: false,
        //   minifyWhitespace: true,
        //   minifyIdentifiers: false,
        //   minifySyntax: true,
        // },
        terserOptions: {},
      }),
    ],
  },
};

6.6 Custom compression function

Override default minify function - use uglify-js for minification.

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: (file, sourceMap) => {
          // https://github.com/mishoo/UglifyJS2#minify-options
          const uglifyJsOptions = {
            /* your `uglify-js` package options */
          };

          if (sourceMap) {
            uglifyJsOptions.sourceMap = {
              content: sourceMap,
            };
          }

          return require("uglify-js").minify(file, uglifyJsOptions);
        },
      }),
    ],
  },
};

6.7 Typescript

6.7.1 Using the default terser compression function

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

6.7.2 Using built-in compression functions

import type { JsMinifyOptions as SwcOptions } from "@swc/core";
import type { MinifyOptions as UglifyJSOptions } from "uglify-js";
import type { TransformOptions as EsbuildOptions } from "esbuild";
import type { MinifyOptions as TerserOptions } from "terser";

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin<SwcOptions>({
        minify: TerserPlugin.swcMinify,
        terserOptions: {
          // `swc` options
        },
      }),
      new TerserPlugin<UglifyJSOptions>({
        minify: TerserPlugin.uglifyJsMinify,
        terserOptions: {
          // `uglif-js` options
        },
      }),
      new TerserPlugin<EsbuildOptions>({
        minify: TerserPlugin.esbuildMinify,
        terserOptions: {
          // `esbuild` options
        },
      }),

      // Alternative usage:
      new TerserPlugin<TerserOptions>({
        minify: TerserPlugin.terserMinify,
        terserOptions: {
          // `terser` options
        },
      }),
    ],
  },
};

7. Description

This document is only for the record of learning TerserWebpackPlugin by myself, and it is used for the record to facilitate quick search in the future.
For more complete documentation, please refer to: TerserWebpackPlugin

Front-end Notes - TerserWebpackPlugin Configuration

1. Reference documents

2. Install

3. Webpack configuration example

4. Option Description

5. Parameter usage examples

5.1 test

5.2 include

5.3 exclude

5.4 parallel

5.4.1 Boolean

5.4.2 Number

5.5 minify

5.6 terserOptions

5.7 extractComments

5.7.1 Boolean

5.7.2 String

5.7.3 RegExp

5.7.4 Function<(node, comment) -> Boolean>

5.7.5 Object

5.7.6 condition

5.7.7 filename

5.7.8 banner

6. Quick configuration

6.1 Keep comments

6.2 Delete comments

6.3 uglify-js

6.4 swc

6.5 esbuild

6.6 Custom compression function

6.7 Typescript

6.7.1 Using the default terser compression function

6.7.2 Using built-in compression functions

7. Description

Guess you like