Build mode with readable minified output

[gaearon]

Describe the feature you'd like to request

We have a build flag we use for debugging React build output. --pretty

It applies all the usual minification algorithms but leaves all the variable names intact and runs the minifier output through Prettier. This makes it perfect to analyze what's in your bundle with casual scanning. It's also invaluable for profiling because you get full method names in the flamegraph but the behavior itself is 100% prod-like (so, no DEV branches).

I want the same but for Next.js app code.

Describe the solution you'd like

A flag to next build that applies all the usual optimizations but (1) doesn't change variable names, (2) runs the output through Prettier. Note this is not the same as "don't minify the code". I want literally all minifier passes to run, except the variable renaming step. It should still inline stuff, reuse variables, DCE, etc, whatever the production behavior is.

Describe alternatives you've considered

• Dev builds are not representative of what gets shipped and aren't helpful for debugging perf issues
• Profiling builds are good but lack the symbolic information
• Production builds also lack the symbolic information

So none of the existing options are great.

[nader-zouaoui]

I think this is a great a'd needed addition to the framework. We think it can be of great help to our team as it would save quite some time while looking for some unexpected behaviors in production. So, if this feature gets approved I am willing to put in a few hours a week to help working on it. If needed we can even start drafting some of it to get a better idea of how it could look.

[JCMais]

Another use case, that is not related to profiling or debugging, is that sometimes the code may rely on class names not being mangled in production.

One example is when using the ECS pattern, and getting/setting components based on their class name (componentInstance.constructor.name / ComponentClass.name). With mangled class names, the risk of collisions is high.

Right now the only workaround we found was to apply a patch to next.js directly. This is the patch we are using for Next.js v12.2.3:

diff --git a/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js b/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
index afd72c2..90099a4 100644
--- a/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
+++ b/node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
@@ -150,7 +150,9 @@ class TerserPlugin {
                                     }
                                 } : {},
                                 compress: true,
-                                mangle: true
+                                mangle: {
+                                    keep_fnames:true,keep_classnames:true
+                                }
                             });
                             return result;
                         }
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 aab2e65..7a9b939 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
@@ -13,7 +13,8 @@ function buildTerserOptions(terserOptions = {}) {
     return {
         ...terserOptions,
         mangle: terserOptions.mangle == null ? true : typeof terserOptions.mangle === "boolean" ? terserOptions.mangle : {
-            ...terserOptions.mangle
+            ...terserOptions.mangle,
+            keep_fnames:true,keep_classnames:true
         },
         // Ignoring sourceMap from options
         // eslint-disable-next-line no-undefined

It covers both swcMinify: true and swcMinify: false.

[gaearon]

I would strongly recommend against this technique. If you need global unmangled IDs, assign them to your classes explicitly.

[halfmatthalfcat]

This is not a possible workaround (that I know of) when using libraries such as class-transformer to hydrate classes.

[ivadenis]

I've just spent a big chunk of my life figuring out why 3rd party web worker breaks with production build. Turns out that the mangler would obfuscate WorkerGlobalScope property self which caused a Reference Error. The following setting fixed the issue. However, can't use it with swcMinify: true.

 swcMinify: false,
 swcMinifyDebugOptions: {
        mangle: {
          reserved: ['self', 'global']
        }
      }...

I just want to note the importance of being able to set the minifier/mangler settings from within a config.

[feedthejim]

@gaearon I added something like this in #40958

When it's published on canary, you can use it by declaring the env var __NEXT_MANGLING_DEBUG (naming tbd) like

__NEXT_MANGLING_DEBUG=1 next build <...>

and the output will be beautified/most variable names should not be mangled

[gaearon]

Amazing, thanks

[SukkaW]

The feature is now implemented by #42633.