Feature Request: Support for custom terser options.

[dbo]

Describe the feature you'd like to request

Running different deployments for different purposes require also different terser options. For instance, we run a deployment for testing purposes that has been built with optimizations turned on, but keeps un-mangled function and class names to be able to inspect the react tree.

Describe the solution you'd like

I'd prefer to customize the terser options via next-config, e.g. a property terserOptions.

Describe alternatives you've considered

The next.js webpack config is quite complex, using an own custom complete webpack config seems to be a lot of effort to get right. So far we monkey patch the terser options inside the webpack next-config hook, but recently this has become quite a hassle, since the next webpack minimizer code has been migrated to use callbacks, using hoisted variables.

[markerikson]

Agreed, I'm looking at the same use case right now. There's a gist at https://gist.github.com/kamranayub/1cef1362632f3f259bf0b4874bfa40d8 that showed how to search the Webpack config for instances of the Terser plugin, but reading the current Next source at minify.js, it looks like Next now handles the call to Terser internally, and there's no way to pass through options to override this.

For reference, here's what needs to be overridden: https://kentcdodds.com/blog/profile-a-react-app-for-performance#disable-function-name-mangling

I suppose Next could automatically set those flags if you turn on the --profile flag, but I could also see usefulness in exposing some minification options in general.

[JCMais]

+1 for the same suggestion. I have some code that relies on function names being available in the production build. Previously I was just doing this in the next-config:

if (config.optimization) {
    for (const plugin of config.optimization.minimizer) {
        if (plugin.constructor.name === 'TerserPlugin') {
            plugin.options.terserOptions.mangle = {
                ...plugin.options.terserOptions.mangle,
                keep_fnames: true,
            }
            break
        }
    }
}

But since the update to Next.js 10.2 this is not working anymore. As a workaround I'm using patch-package to patch next with the following:

diff --git a/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/minify.js b/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/minify.js
index 7aef51b..0bebf25 100644
--- a/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/minify.js
+++ b/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/minify.js
@@ -1,5 +1,5 @@
 "use strict";exports.__esModule=true;exports.minify=minify;var _terser=_interopRequireDefault(require("next/dist/compiled/terser"));function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj};}// @ts-nocheck
-function buildTerserOptions(terserOptions={}){return{...terserOptions,mangle:terserOptions.mangle==null?true:typeof terserOptions.mangle==='boolean'?terserOptions.mangle:{...terserOptions.mangle},// Ignoring sourceMap from options
+function buildTerserOptions(terserOptions={}){return{...terserOptions,mangle:terserOptions.mangle==null?{keep_fnames: true}:typeof terserOptions.mangle==='boolean'?terserOptions.mangle:{...terserOptions.mangle, keep_fnames: true,},// Ignoring sourceMap from options
 // eslint-disable-next-line no-undefined
 sourceMap:undefined,// the `output` option is deprecated
 ...(terserOptions.format?{format:{beautify:false,...terserOptions.format}}:{output:{beautify:false,...terserOptions.output}})};}async function minify(options){const{name,input,inputSourceMap,terserOptions}=options;// Copy terser options

[anirudhsama]

Thanks for sharing this! It works

[jeanbmar]

Please consider this feature request. It's a nightmare to do monkey patching because some dependencies don't support minification. We want to be able to customize Terser conf to exclude them.

[mfix-stripe]

Other folks are looking for this option here https://gist.github.com/kamranayub/1cef1362632f3f259bf0b4874bfa40d8 as well.

I also need to be able to update keep_fnames for my use case. Would be great to be able to override these options again.

[andre2dash]

why hasn't this been solved yet?

[satorioh]

I'm using next.js 14 with tensorflow.js, according to official readme for JS Minification section, if I need use wasm backend with SIMD+multi-threading enable, I should turn off "typeofs" in terser option, but next.js does not support now, and I tried below code, it not works for me:
const terser = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);