investigate Terser use for minification

In a nutshell:

• Webpack v4 uses uglifyjs-webpack-plugin for minification, which is actually based on uglify-es
• We had to stop using that and instead use babel-minify-webpack-plugin a while ago because of minification issues #4871
• babel-minify is still marked as beta on the website and last had an update ~3 months ago
• babel-minify-webpack-plugin has not had an update in ~10 months
• uglify-es is now no longer maintained and was eventually forked as Terser
• Webpack plans to use Terser by default in v5 (next major release, still in development): https://github.com/webpack/webpack/pull/8036 and terser-webpack-plugin can be used in the interim

The webpack history itself is summarized neatly in this commit https://github.com/edmorley/webpack/commit/79910c6ba5c773aa5eeb4bb31aca12d405247067

I’m opening this issue up to explore whether there are benefits to switching over to using terser in our bundling before v5:

• speed - is there a noticeable speed up when doing yarn build:prod?
• bundle size - is it a smaller bundle compared to babel-minify? how much?
• features - we need sourcemaps to help with getting sensible stack traces - are they still supported?

[brendonbribeiro]

I ran some quick tests with terser by running yarn build: prod:

| Build time | Output Size – | – | – babel-minify | 85.36s | 43.401.373 bytes (45,9 MB) terser | 73.57s | 43.381.135 bytes (45,9 MB)

I recently switched from Uglify to Terser in another project, and it has considerably shortened our build time.

[shiftkey]

Thanks for the input @brendonbarreto and @j-f1.

For the moment I’d like to leave things as-is in here, and potentially revisit when Webpack 5 drops to see what benefits there might be to upgrade then (e.g. https://github.com/webpack/webpack/pull/8609).