From bccf1861456d9f11b74dffe9cabe2c5ba0796a04 Mon Sep 17 00:00:00 2001
From: Jimmy Lai <laijimmy0@gmail.com>
Date: Tue, 8 Nov 2022 18:53:29 +0100
Subject: [PATCH] feat: add --no-mangling to next build + fix --profile option
 (#42633)

This PR adds a `--no-mangling` option to `next build` and fixes the `--profile` option so that you can use the React profiling build on production.

The advantage of disabling only mangling versus disabling minification altogether is that we still run terser and still benefit from DCE with this approach, so the `--no-mangling` does not impact performance as much.

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
---
 packages/next/build/index.ts          |  4 +++-
 packages/next/build/webpack-config.ts | 10 +++++++---
 packages/next/cli/next-build.ts       | 10 +++++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/next/build/index.ts b/packages/next/build/index.ts
index 192c8074facb4eb..5f63699f480dfb0 100644
--- a/packages/next/build/index.ts
+++ b/packages/next/build/index.ts
@@ -254,7 +254,8 @@ export default async function build(
   conf = null,
   reactProductionProfiling = false,
   debugOutput = false,
-  runLint = true
+  runLint = true,
+  noMangling = false
 ): Promise<void> {
   try {
     const nextBuildSpan = trace('next-build', undefined, {
@@ -932,6 +933,7 @@ export default async function build(
           runWebpackSpan,
           target,
           appDir,
+          noMangling,
           middlewareMatchers: entrypoints.middlewareMatchers,
         }
 
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
index 58bd82717fe0ce8..e49a93a0c8f80f7 100644
--- a/packages/next/build/webpack-config.ts
+++ b/packages/next/build/webpack-config.ts
@@ -579,6 +579,7 @@ export default async function getBaseWebpackConfig(
     target = COMPILER_NAMES.server,
     appDir,
     middlewareMatchers,
+    noMangling = false,
   }: {
     buildId: string
     config: NextConfigComplete
@@ -593,6 +594,7 @@ export default async function getBaseWebpackConfig(
     target?: string
     appDir?: string
     middlewareMatchers?: MiddlewareMatcher[]
+    noMangling?: boolean
   }
 ): Promise<webpack.Configuration> {
   const isClient = compilerType === COMPILER_NAMES.client
@@ -981,7 +983,7 @@ export default async function getBaseWebpackConfig(
     },
     mangle: {
       safari10: true,
-      ...(process.env.__NEXT_MANGLING_DEBUG
+      ...(process.env.__NEXT_MANGLING_DEBUG || noMangling
         ? {
             toplevel: true,
             module: true,
@@ -996,7 +998,7 @@ export default async function getBaseWebpackConfig(
       comments: false,
       // Fixes usage of Emoji and certain Regex
       ascii_only: true,
-      ...(process.env.__NEXT_MANGLING_DEBUG
+      ...(process.env.__NEXT_MANGLING_DEBUG || noMangling
         ? {
             beautify: true,
           }
@@ -1753,7 +1755,9 @@ export default async function getBaseWebpackConfig(
                     resolve: {
                       alias: {
                         react: 'next/dist/compiled/react',
-                        'react-dom$': 'next/dist/compiled/react-dom',
+                        'react-dom$': reactProductionProfiling
+                          ? 'next/dist/compiled/react-dom/cjs/react-dom.profiling.min'
+                          : 'next/dist/compiled/react-dom',
                         'react-dom/client$':
                           'next/dist/compiled/react-dom/client',
                       },
diff --git a/packages/next/cli/next-build.ts b/packages/next/cli/next-build.ts
index d29852939bed3fb..7e38a77426452e9 100755
--- a/packages/next/cli/next-build.ts
+++ b/packages/next/cli/next-build.ts
@@ -15,6 +15,7 @@ const nextBuild: cliCommand = (argv) => {
     '--profile': Boolean,
     '--debug': Boolean,
     '--no-lint': Boolean,
+    '--no-mangling': Boolean,
     // Aliases
     '-h': '--help',
     '-d': '--debug',
@@ -44,6 +45,7 @@ const nextBuild: cliCommand = (argv) => {
       Options
       --profile     Can be used to enable React Production Profiling
       --no-lint     Disable linting
+      --no-mangling Disable mangling
     `,
       0
     )
@@ -54,6 +56,11 @@ const nextBuild: cliCommand = (argv) => {
   if (args['--no-lint']) {
     Log.warn('Linting is disabled')
   }
+  if (args['--no-mangling']) {
+    Log.warn(
+      'Mangling is disabled. Note: This may affect performance and should only be used for debugging purposes'
+    )
+  }
   const dir = getProjectDir(args._[0])
 
   // Check if the provided directory exists
@@ -66,7 +73,8 @@ const nextBuild: cliCommand = (argv) => {
     null,
     args['--profile'],
     args['--debug'],
-    !args['--no-lint']
+    !args['--no-lint'],
+    args['--no-mangling']
   ).catch((err) => {
     console.error('')
     if (