refactor(@angular-devkit/build-angular): improve debug optimize environment variables

`NG_BUILD_DEBUG_OPTIMIZE` when enabled will disable minify and mangle as well as enable beautify.

Author: clydin

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -30,7 +30,12 @@ import { RawSource } from 'webpack-sources';
 import { AssetPatternClass, ExtraEntryPoint } from '../../../browser/schema';
 import { BuildBrowserFeatures } from '../../../utils';
 import { findCachePath } from '../../../utils/cache-path';
-import { beautifyEnabled, cachingDisabled, manglingDisabled, minifyDisabled } from '../../../utils/environment-options';
+import {
+  allowMangle,
+  allowMinify,
+  cachingDisabled,
+  shouldBeautify,
+} from '../../../utils/environment-options';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { NamedLazyChunksPlugin } from '../../plugins/named-chunks-plugin';
 import { OptimizeCssWebpackPlugin } from '../../plugins/optimize-css-webpack-plugin';
@@ -410,12 +415,12 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
         // default behavior (undefined value) is to keep only important comments (licenses, etc.)
         comments: !buildOptions.extractLicenses && undefined,
         webkit: true,
-        beautify: beautifyEnabled,
+        beautify: shouldBeautify,
       },
       // On server, we don't want to compress anything. We still set the ngDevMode = false for it
       // to remove dev code, and ngI18nClosureMode to remove Closure compiler i18n code
       compress:
-        !minifyDisabled &&
+        allowMinify &&
         (buildOptions.platform == 'server'
           ? {
               ecma: terserEcma,
@@ -432,7 +437,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
             }),
       // We also want to avoid mangling on server.
       // Name mangling is handled within the browser builder
-      mangle: !manglingDisabled && buildOptions.platform !== 'server' && !differentialLoadingMode,
+      mangle: allowMangle && buildOptions.platform !== 'server' && !differentialLoadingMode,
     };
 
     extraMinimizers.push(
@@ -456,15 +461,15 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
         terserOptions: {
           ...terserOptions,
-          compress: !minifyDisabled && {
+          compress: allowMinify && {
             ...terserOptions.compress,
             ecma: 5,
           },
           output: {
             ...terserOptions.output,
             ecma: 5,
           },
-          mangle: !manglingDisabled && buildOptions.platform !== 'server',
+          mangle: allowMangle && buildOptions.platform !== 'server',
         },
       }),
     );

packages/angular_devkit/build_angular/src/utils/action-cache.ts

@@ -8,7 +8,7 @@
 import { createHash } from 'crypto';
 import * as fs from 'fs';
 import { copyFile } from './copy-file';
-import { manglingDisabled } from './environment-options';
+import { allowMangle } from './environment-options';
 import { CacheKey, ProcessBundleOptions, ProcessBundleResult } from './process-bundle';
 
 const cacache = require('cacache');
@@ -42,7 +42,7 @@ export class BundleActionCache {
       .update(content)
       .digest('base64');
     let baseCacheKey = `${packageVersion}|${content.length}|${algorithm}-${codeHash}`;
-    if (manglingDisabled) {
+    if (!allowMangle) {
       baseCacheKey += '|MD';
     }
 

packages/angular_devkit/build_angular/src/utils/environment-options.ts

@@ -19,14 +19,50 @@ function isPresent(variable: string | undefined): variable is string {
   return typeof variable === 'string' && variable !== '';
 }
 
-const mangleVariable = process.env['NG_BUILD_MANGLE'];
-export const manglingDisabled = isPresent(mangleVariable) && isDisabled(mangleVariable);
+const debugOptimizeVariable = process.env['NG_BUILD_DEBUG_OPTIMIZE'];
+const debugOptimize = (() => {
+  if (!isPresent(debugOptimizeVariable) || isDisabled(debugOptimizeVariable)) {
+    return {
+      mangle: true,
+      minify: true,
+      beautify: false,
+    };
+  }
+
+  const debugValue = {
+    mangle: false,
+    minify: false,
+    beautify: true,
+  };
+
+  if (isEnabled(debugOptimizeVariable)) {
+    return debugValue;
+  }
 
-const beautifyVariable = process.env['NG_BUILD_BEAUTIFY'];
-export const beautifyEnabled = isPresent(beautifyVariable) && !isDisabled(beautifyVariable);
+  for (const part of debugOptimizeVariable.split(',')) {
+    switch (part.trim().toLowerCase()) {
+      case 'mangle':
+        debugValue.mangle = true;
+        break;
+      case 'minify':
+        debugValue.minify = true;
+        break;
+      case 'beautify':
+        debugValue.beautify = true;
+        break;
+    }
+  }
+
+  return debugValue;
+})();
+
+const mangleVariable = process.env['NG_BUILD_MANGLE'];
+export const allowMangle = isPresent(mangleVariable)
+  ? !isDisabled(mangleVariable)
+  : debugOptimize.mangle;
 
-const minifyVariable = process.env['NG_BUILD_MINIFY'];
-export const minifyDisabled = isPresent(minifyVariable) && isDisabled(minifyVariable);
+export const shouldBeautify = debugOptimize.beautify;
+export const allowMinify = debugOptimize.minify;
 
 const cacheVariable = process.env['NG_BUILD_CACHE'];
 export const cachingDisabled = isPresent(cacheVariable) && isDisabled(cacheVariable);

packages/angular_devkit/build_angular/src/utils/process-bundle.ts

@@ -21,7 +21,7 @@ import { RawSourceMap, SourceMapConsumer, SourceMapGenerator } from 'source-map'
 import { minify } from 'terser';
 import * as v8 from 'v8';
 import { SourceMapSource } from 'webpack-sources';
-import { beautifyEnabled, manglingDisabled, minifyDisabled } from './environment-options';
+import { allowMangle, allowMinify, shouldBeautify } from './environment-options';
 import { I18nOptions } from './i18n-options';
 
 const cacache = require('cacache');
@@ -136,8 +136,8 @@ export async function process(options: ProcessBundleOptions): Promise<ProcessBun
         },
       ]],
       plugins: options.replacements ? [createReplacePlugin(options.replacements)] : [],
-      minified: !minifyDisabled && !!options.optimize,
-      compact: !beautifyEnabled && !!options.optimize,
+      minified: allowMinify && !!options.optimize,
+      compact: !shouldBeautify && !!options.optimize,
       sourceMaps: !!sourceMap,
     });
 
@@ -341,14 +341,14 @@ async function terserMangle(
 
   // Mangle downlevel code
   const minifyOutput = minify(options.filename ? { [options.filename]: code } : code, {
-    compress: !minifyDisabled && !!options.compress,
+    compress: allowMinify && !!options.compress,
     ecma: options.ecma || 5,
-    mangle: !manglingDisabled,
+    mangle: allowMangle,
     safari10: true,
     output: {
       ascii_only: true,
       webkit: true,
-      beautify: beautifyEnabled,
+      beautify: shouldBeautify,
     },
     sourceMap:
       !!options.map &&