Плагин TerserWebpackPlugin

Этот плагин использует terser для минификации вашего JavaScript.

Начало работы

Для начала вам потребуется установить terser-webpack-plugin:

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

Затем добавьте плагин в вашу конфигурацию webpack. Например:

webpack.config.js

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

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

И запустите webpack через ваш предпочитаемый метод.

Параметры

test

Тип: String|RegExp|Array<String|RegExp> Значение по умолчанию: /\.m?js(\?.*)?$/i

Шаблон для сопоставления файлов.

webpack.config.js

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

include

Тип: String|RegExp|Array<String|RegExp> Значение по умолчанию: undefined

Файлы для включения.

webpack.config.js

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

exclude

Тип: String|RegExp|Array<String|RegExp> Значение по умолчанию: undefined

Файлы для исключения.

webpack.config.js

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

chunkFilter

Тип: Function<(chunk) -> boolean> Значение по умолчанию: () => true

Позволяет фильтровать чанки, которые должны быть сжаты (по умолчанию все чанки сжимаются). Возвращает true для сжатия чанка, false в противном случае.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        chunkFilter: (chunk) => {
          // Exclude uglification for the `vendor` chunk
          if (chunk.name === 'vendor') {
            return false;
          }

          return true;
        },
      }),
    ],
  },
};

cache

Тип: Boolean|String Значение по умолчанию: true

Включить кэширование файлов. Путь по умолчанию к каталогу кэша: node_modules/.cache/terser-webpack-plugin.

ℹ️ Если вы используете собственную функцию minify, пожалуйста, прочитайте раздел minify для правильного обновления кэша.

Boolean

Включить/выключить кэширование файлов.

webpack.config.js

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

String

Включить кэширование файлов и указать путь к каталогу кэша.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        cache: 'path/to/cache',
      }),
    ],
  },
};

cacheKeys

Тип: Function<(defaultCacheKeys, file) -> Object> Значение по умолчанию: defaultCacheKeys => defaultCacheKeys

Позволяет переопределить значения ключей кэша по умолчанию.

Ключи кэша по умолчанию:

({
  terser: require('terser/package.json').version, // terser version
  'terser-webpack-plugin': require('../package.json').version, // plugin version
  'terser-webpack-plugin-options': this.options, // plugin options
  path: compiler.outputPath ? `${compiler.outputPath}/${file}` : file, // asset path
  hash: crypto
    .createHash('md4')
    .update(input)
    .digest('hex'), // source file hash
});

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        cache: true,
        cacheKeys: (defaultCacheKeys, file) => {
          defaultCacheKeys.myCacheKey = 'myCacheKeyValue';

          return defaultCacheKeys;
        },
      }),
    ],
  },
};

parallel

Тип: Boolean|Number Значение по умолчанию: true

Использовать многопроцессорную параллельную работу для повышения скорости сборки. По умолчанию количество одновременных запусков: os.cpus().length - 1.

ℹ️ Параллелизация может значительно ускорить сборку и поэтому настоятельно рекомендуется.

Boolean

Включить/выключить многопроцессорную параллельную работу.

webpack.config.js

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

Number

Включить многопроцессорную параллельную работу и установить количество одновременных запусков.

webpack.config.js

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

sourceMap

Тип: Boolean Значение по умолчанию: false (см. ниже информацию о значении devtool и плагине SourceMapDevToolPlugin)

Работает только со значениями source-map, inline-source-map, hidden-source-map и nosources-source-map для опции devtool.

Почему?

• eval оборачивает модули в eval("string"), а минимизатор не обрабатывает строки.
• cheap не содержит информации о столбцах, а минимизатор генерирует только одну строку, что оставляет только одно сопоставление.

Плагин учитывает devtool и использует плагин SourceMapDevToolPlugin. Использование поддерживаемых значений devtool позволяет генерировать карты исходного кода. Использование SourceMapDevToolPlugin с включенным параметром columns также позволяет генерировать карты исходного кода.

Используйте карты исходного кода для сопоставления местоположений сообщений об ошибках с модулями (это замедляет компиляцию). Если вы используете собственную функцию minify, обратитесь к разделу minify для правильной обработки карт исходного кода.

webpack.config.js

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

minify

Тип: Function Значение по умолчанию: undefined

Позволяет переопределить функцию минимизации по умолчанию. По умолчанию плагин использует пакет terser. Полезно для использования и тестирования неопубликованных версий или форков.

⚠️ Всегда используйте require внутри функции minify когда включен параметр parallel.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        minify: (file, sourceMap) => {
          const extractedComments = [];

          // Custom logic for extract comments

          const { error, map, code, warnings } = require('uglify-module') // Or require('./path/to/uglify-module')
            .minify(file, {
              /* Your options for minification */
            });

          return { error, map, code, warnings, extractedComments };
        },
      }),
    ],
  },
};

terserOptions

Тип: Object Значение по умолчанию: по умолчанию

Параметры минимизации Terser options.

webpack.config.js

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

extractComments

Тип: Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>|Object Значение по умолчанию: true

Выводить ли комментарии в отдельный файл (см. подробности). По умолчанию, извлекаются только комментарии, соответствующие условию с использованием /^\**!|@preserve|@license|@cc_on/i регулярного выражения, а остальные удаляются. Если исходный файл называется foo.js, то комментарии будут сохранены в foo.js.LICENSE. Параметр terserOptions.output.comments указывает, сохранить ли комментарий, т.е. можно сохранить некоторые комментарии (например, аннотации), извлекая другие, или даже сохранить комментарии, которые уже были извлечены.

Boolean

Включить/выключить извлечение комментариев.

webpack.config.js

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

String

Извлечь комментарии all или some (используйте /^\**!|@preserve|@license|@cc_on/i регулярное выражение).

webpack.config.js

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

RegExp

Все комментарии, соответствующие заданному выражению, будут извлечены в отдельный файл.

webpack.config.js

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

Function<(node, comment) -> Boolean>

Все комментарии, соответствующие заданному выражению, будут извлечены в отдельный файл.

webpack.config.js

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

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

Object

Позволяет настроить условия извлечения комментариев, указать имя файла для извлеченных комментариев и баннер.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: /^\**!|@preserve|@license|@cc_on/i,
          filename: (file, fileData) => {
            // A file can contain a query string (for example when you have `output.filename: '[name].js?[chunkhash]'`)
            // You must consider this
            // The "fileData" argument contains object with "filename", "basename", "query"
            return file.replace(/\.(\w+)($|\?)/, '.$1.LICENSE$2');
          },
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
    ],
  },
};

condition

Тип: Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>

Условие для извлечения комментариев.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: 'some',
          filename: (file, fileData) => {
            // A file can contain a query string (for example when you have `output.filename: '[name].js?[chunkhash]'`)
            // You must consider this
            return file.replace(/\.(\w+)($|\?)/, '.$1.LICENSE$2');
          },
          banner: (licenseFile) => {
            return `License information can be found in ${licenseFile}`;
          },
        },
      }),
    ],
  },
};

filename

Тип: String|Function<(string) -> String> Значение по умолчанию: [file].LICENSE[query]

Доступные плейсхолдеры: [file], [query] и [filebase].

Файл, в который будут сохранены извлеченные комментарии. По умолчанию добавляется суффикс .LICENSE к имени исходного файла.

webpack.config.js

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

banner

Тип: Boolean|String|Function<(string) -> String> Значение по умолчанию: /*! For license information please see ${commentsFile} */

Текст баннера, указывающий на извлеченный файл и добавляемый в начало исходного файла. Может быть false (без баннера), String, или Function<(string) -> String>, которая будет вызвана с именем файла, где были сохранены извлеченные комментарии. Будет заключено в комментарий.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: {
          condition: true,
          filename: (file, fileData) => {
            // A file can contain a query string (for example when you have `output.filename: '[name].js?[chunkhash]'`)
            // You must consider this
            return file.replace(/\.(\w+)($|\?)/, '.$1.LICENSE$2');
          },
          banner: (commentsFile) => {
            return `My custom banner about license information ${commentsFile}`;
          },
        },
      }),
    ],
  },
};

warningsFilter

Тип: Function<(warning, source, file) -> Boolean> Значение по умолчанию: () => true

Позволяет отфильтровать предупреждения terser. Возвращает true для сохранения предупреждения, ложное значение (false, null, undefined) в противном случае.

⚠️ Аргумент source будет содержать undefined если вы не используете карты исходного кода.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        warningsFilter: (warning, source, file) => {
          if (/Dropping unreachable code/i.test(warning)) {
            return true;
          }

          if (/source\.js/i.test(source)) {
            return true;
          }

          if (/file\.js/i.test(file)) {
            return true;
          }

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

Примеры

Сохранение комментариев

Извлечь все допустимые комментарии (т.е. /^\**!|@preserve|@license|@cc_on/i) и сохранить /@license/i комментарии.

webpack.config.js

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

Удаление комментариев

Если вы хотите избежать комментариев при построении, используйте эту конфигурацию:

webpack.config.js

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

Пользовательская функция минимизации

Переопределите функцию минимизации по умолчанию - используйте uglify-js для минимизации.

webpack.config.js

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        // Uncomment lines below for cache invalidation correctly
        // cache: true,
        // cacheKeys: (defaultCacheKeys) => {
        //   delete defaultCacheKeys.terser;
        //
        //   return Object.assign(
        //     {},
        //     defaultCacheKeys,
        //     { 'uglify-js': require('uglify-js/package.json').version },
        //   );
        // },
        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);
        },
      }),
    ],
  },
};

Содействие развитию

Пожалуйста, ознакомьтесь с нашими рекомендациями по участию, если вы этого еще не сделали.

CONTRIBUTING

Лицензия

MIT