Switch from uglifyjs-webpack-plugin (uglify-es) to terser-webpack-plugin (terser)

[edmorley]

Feature request

What is the expected behavior?
For webpack to use the new terser-webpack-plugin instead of uglifyjs-webpack-plugin.

What is motivation or use case for adding/changing the behavior?
uglifyjs-webpack-plugin uses uglify-es which is no longer maintained, and has been replaced by a fork called terser. The fork has incorporated a number of fixes and testcases that were left to go stale in the original project.

How should this be implemented in your opinion?
Changing the default minimizer here to use terser-webpack-plugin:

webpack/lib/WebpackOptionsDefaulter.js

Lines 304 to 315 in 0e60343

	apply: compiler => {
	// Lazy load the uglifyjs plugin
	const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
	const SourceMapDevToolPlugin = require("./SourceMapDevToolPlugin");
	new UglifyJsPlugin({
	cache: true,
	parallel: true,
	sourceMap:
	(options.devtool && /source-?map/.test(options.devtool)) ||
	(options.plugins &&
	options.plugins.some(p => p instanceof SourceMapDevToolPlugin))
	}).apply(compiler);

...and update the dependency list here:

webpack/package.json

Line 30 in 0e60343

"uglifyjs-webpack-plugin": "^1.2.4",

Sadly I think this needs to be called a breaking change (and thus only merged into the next branch), since the terser-webpack-plugin options are named slightly differently (eg terserOptions vs uglifyOptions).

However perhaps support could be added to terser-webpack-plugin for checking for both option names? I don't think there are any other breaking changes (the new plugin doesn't support Node 4, but neither does webpack 4) - @fabiosantoscode / @evilebottnawi could you confirm?

Are you willing to work on this yourself?
Yes - I'll open a PR.

[sokra]

Yes this change was also our plan.

You can go ahead and send a PR to the next branch.

[byzyk]

Hey @edmorley, thanks for your feature request!

I was wondering if you're still going to work on this one? I could pick this one up so let me know, please.

[edmorley]

Hi! Thank you for the reminder, I'll take a look at this later today/tomorrow :-)

[edmorley]

Making the changes locally, the tests are generating hundreds of warnings of form:
DeprecationWarning: Compilation.chunks was changed from Array to Set (using Array methods is deprecated)

...are these pre-existing on next? If so, it would be good to fix these asap, since they are somewhat confusing to contributors, since not clear if due to my changes. (CC @sokra)

[sokra]

Yep these warnings are pre-existing in next. They are from the uglifyjs-webpack-plugin (--trace-deprecation if you want details). It doesn't support webpack 5 yet, which deprecates some stuff.

[sokra]

Not sure if it makes sense to fix it in uglifyjs-webpack-plugin since it should be replaced anyway (which this issue is actually about).

[piuccio]

How does terser compare to babel-minify?

[edmorley]

Currently using babel-minify with webpack is much much slower, since babel-minify-webpack-plugin doesn't support caching or parallel mode, whereas terser-webpack-plugin (and uglifyjs-webpack-plugin) do.

babel-minify-webpack-plugin also has known bugs when using source maps that are a complete blocker for many use-cases (webpack-contrib/babel-minify-webpack-plugin#68).

However as always, it's worth trying both and seeing what works best for your project. Hopefully in the future babel-minify-webpack-plugin will get some love and be a viable alternative.

[edmorley]

(Sorry that last sentence should have said babel-minify-webpack-plugin; edited to fix)

[edmorley]

Closing since this has been fixed on the next branch (webpack 5) in #8036.
(GitHub didn't auto-close this since it only does so when PRs are merged into the default branch.)

[tzachshabtay]

Closing since this has been fixed on the next branch (webpack 5)

This is actually not true: It seems to have been integrated into webpack 4.26, @edmorley?

It made my build unusable in the process (from 10-20 seconds before this change to several minutes, and worse yet, it completely hangs my computer while it's compiling? Using Ubuntu 18.04).
I'm working around it for now by disabling minification completely:

optimization: {
        minimize: false
    }

But is there a way to change it back to use uglify?
The relase notes specify to see optimization.minimizers but the link there only has Terser as an example, it's missing how to set back uglify.

[edmorley]

This is actually not true: It seems to have been integrated into webpack 4.26, @edmorley?

At the time of that comment this change only existed on the next branch (webpack 5), however since then it has been backported to webpack 4 - in #8392.

I would try to create a reduced testcase and file a new issue. It may help to specify optimization.minimizers manually, and use custom terserOptions to find out which minification feature (mangle/compress/...) is causing the issue.

[netsrotr]

using node@latest, @angular/cli": "^7.3.1", run command "ng build --prod".
Processing..., then it "seems to hang" at "92% chunk asset optimization TerserPlugin"
for more than 2 hours, finally crashed hard with this console output:

<--- Last few GCs --->
[10740:000000198FCDCA40] 7379781 ms: Mark-sweep 1533.3 (1873.5) -> 1533.3 (1824.5) MB, 2248.3 / 0.0 ms last resort GC in old space requested
[10740:000000198FCDCA40] 7382009 ms: Mark-sweep 1533.3 (1824.5) -> 1533.3 (1807.0) MB, 2228.3 / 0.0 ms last resort GC in old space requested

<--- JS stacktrace --->
==== JS stack trace =========================================

Security context: 000000B554DA5EE1
1: consider [D:\Daten\Project\Application\Web\HTML\Presentation_Project\node_modules\terser\dist\bundle.min.js:~1] [pc=0000029D9F2F3F7D](this=00000002747C7669 <JSFunction a (sfi = 00000004311F8AC1)>,e=000000DA2965F0B1 <Very long string[14452013]>,n=1)
3: compute_char_frequency [D:\Daten\Project\Application\Web\HTML\Presentation_Project\node_modules\t...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

Can we do anything other then switch off minimization? Should the comment posted as it's own issue/bug?