TerserWebpackPlugin

该插件使用 terser 来压缩 JavaScript

webpack v5 开箱即带有最新版本的 terser-webpack-plugin。如果你使用的是 webpack v5 或更高版本，同时希望自定义配置，那么仍需要安装 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
         extractComments: false,
    })],
  },
};

属性

test

用来匹配需要压缩的文件。

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

include

匹配参与压缩的文件

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

exclude

匹配不需要压缩的文件

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

parallel

使用多进程并发运行以提高构建速度。 并发运行的默认数量： os.cpus().length - 1 。

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

terserOptions

Terser 配置项 。

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

extractComments

是否将注释剥离到单独的文件中

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
         extractComments: false,
    })],
  },
};

minify

允许你自定义压缩函数。 默认情况下，插件使用 terser 库。 对于使用和测试未发布的版本或 fork 的代码很帮助。
⚠️ 启用 parallel 选项时，在 minify 函数内部只能使用 __require 。

const minify = (input, sourceMap, minimizerOptions, extractsComments) => {
  const { map, code } = require("uglify-module") // Or require('./path/to/uglify-module')
    .minify(input, {
    });
  return { map, code, warnings: [], errors: [], extractedComments: [] };
};
minify.getMinimizerVersion = () => {
  let packageJson;
  try {
    packageJson = require("uglify-module/package.json");
  } catch (error) {
    // Ignore
  }
  return packageJson && packageJson.version;
};
new TerserPlugin({
    terserOptions: {
        myCustomOption: true,
    },
    minify,
}),

使用

功能

1. 移除console.log
2. 移除debugger
3. 不将注释剥离到单独的文件中

   module.exports = {
   optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
         drop_console: true,
         drop_debugger: true,
         pure_funcs: ['console.log'],
         extractComments:false
      }),
    ],
   },
   };