UglifyJS Plugin の使い方 [Webpack]

UglifyJS Plugin

参考：

UglifyjsWebpackPlugin | Webpack [Official]

Optimization | Webpack [Official]

webpack-contrib/uglifyjs-webpack-plugin: UglifyJS Plugin – GitHub

mishoo/UglifyJS2: JavaScript parser / mangler / compressor / beautifier toolkit – GitHub

UglifyJS [Official]

使い方

production 環境では、optimization.minimize はデフォルトで true である。

module.exports = {
  // ...
  optimization: {
    minimize: true
  },
  // ...
}

参考：

webpack@4 の mode と minimize (UglifyJS) | 30歳からのプログラミング

Minifying | SurviveJS

Webpack 4 – How to configure minimize? – Stack Overflow

webpack 4 disable uglifyjs-webpack-plugin – Stack Overflow

drop_console

参考：

vue-cliのwebpack productionビルド時にconsoleログ出力を削除したい – Do Something

mangle

uglifyOptions: {
  // ...
  mangle: {
    safari10: true
  },
  // ...
}

参考：

SyntaxError: Cannot declare a let variable twice · Issue #92 · webpack-contrib/uglifyjs-webpack-plugin – GitHub

uglify-es

v2.0.0 以降の uglifyjs-webpack-plugin では uglifyjs-es は使えない。出力は ES5 のみ。

Switch back to uglify-js (uglify-es is abandoned, if you need uglify ES6 code please use terser-webpack-plugin).

参考：

Release v2.0.0 · webpack-contrib/uglifyjs-webpack-plugin – GitHub

How to minify ES6 code using Webpack? – Stack Overflow

feat: update to `uglify-es` by Hartorn · Pull Request #63 · webpack-contrib/uglifyjs-webpack-plugin – GitHub

switch to uglify-es · Issue #33 · webpack-contrib/uglifyjs-webpack-plugin – GitHub

Support UglifyJS 3 · Issue #32 · webpack-contrib/uglifyjs-webpack-plugin – GitHub

Terser Plugin (terser-webpack-plugin)

ES6+ を minify できる。

参考：

webpack-contrib/terser-webpack-plugin: Terser Plugin – GitHub

terser-js/terser: JavaScript parser, mangler, optimizer and beautifier toolkit for ES6+ – GitHub

UglifyJS の代わりに、terser を使って webpack する – Qiita

Babel Minify Webpack Plugin (babel-minify-webpack-plugin)

ES6+ を minify できる。

参考：

webpack-contrib/babel-minify-webpack-plugin: Babel Minify Webpack Plugin – GitHub

babel/minify: An ES6+ aware minifier based on the Babel toolchain (beta) – GitHub

Compare speed/size of babel-minify vs uglify-es · Issue #748 · neutrinojs/neutrino – GitHub