Angular-Cli：如何忽略类名被缩小

Question

对于应用程序，我们需要使类名保持最小，因为我们使用

var className = myObject.constructor.name;
export class myObject{ ... }

当我们跑步

ng build-专业

类名会以随机名称最小化。

Answer 1

Angular cli builder 支持NG_BUILD_MANGLE, NG_BUILD_MINIFY,NG_BUILD_BEAUTIFY节点环境参数（在版本 8 中检查）。

您可以通过以下方式在运行 npm 脚本时设置它们： env NG_BUILD_MANGLE=false NG_BUILD_MINIFY=false NG_BUILD_BEAUTIFY=true ng build --prod

这将导致未缩小的输出，但仍会应用摇树和其他优化（与仅关闭优化相比）。

Answer 2

对于 Angular 9-12，其他一些答案不再有效。

与Rob 的回答类似，我们不想担心维护 的修改版本@angular-devkit/build-angular，因此我改为使用ngx-build-plus我们的构建器，以便在构建过程中引入一个简单的插件来覆盖 Terser 配置。这适用于 Angular 9-11。

我创建了一个名为的新文件build-plugin.js：

exports.default = {
  pre: function () {
  },
  config: function (cfg) {
    // Override Angular's internal configuration of Terser to preserve class names.
    // This won't work if you build multiple (differential) client bundles, so make sure you only target es5 builds in tsconfig.json.
    // See https://github.com/just-jeb/angular-builders/issues/144#issuecomment-576424615
    cfg.optimization.minimizer.forEach(function (it) {
      if (it.constructor.name === 'TerserPlugin') {
        it.options.terserOptions["keep_fnames"] = true;
        it.options.terserOptions["keep_classnames"] = true;
      }
    });
    return cfg;
  },
  post: function () {
  }
};

然后更新了项目的angular.json：

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",
          "options": {
            "plugin": "~build-plugin.js",
            ...
          }
        }
      }
    }
  }
  ...
}

在 Angular 12 中，他们将大多数项目的代码优化器从TerserPlugin改为。JavaScriptOptimizerPlugin因此，只需更新build-plugin.js以包含它的覆盖：

if (it.constructor.name === 'TerserPlugin') {
    it.options.terserOptions["keep_fnames"] = true;
    it.options.terserOptions["keep_classnames"] = true;
} else if (it.constructor.name === 'JavaScriptOptimizerPlugin') {
    it.options.keepNames = true;
}

Answer 3

使用Angular-builders添加 yantrab 对 Angular 8.2+ 的答案

在 Angular.json 中

建造者：@angular-builders/custom-webpack:browser

选项：

    "customWebpackConfig": {
      "path": "./extra-webpack.config.js",
      "mergeStrategies": {
        "externals": "replace"
      }
    },

在 extra-webpack.config.js 中：

module.exports = config => {
  config.optimization.minimizer.filter (({constructor: {name}}) => name === 'TerserPlugin')
  .forEach (terser => {
    terser.options.terserOptions.keep_classnames = true;
  });

  return config;
};

然后根据此处讨论的浏览器列表禁用差异加载的目标 es5 或 es2015： https: //github.com/just-jeb/angular-builders/issues/144#issuecomment-568890065

Answer 4

Angular cli 在内部使用 webpack 和 uglify。一种解决方案是通过导出 webpack 配置来更改 uglify 中的选项。您可以通过运行 ngject 和 ngject --prod 来查看 webpack 文件

new UglifyJsPlugin({
      "mangle": false,
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }),

Mangle = false 将保留类名。Angular cli 中缺乏 webpack 选项是一个大讨论。

您还可以像这样设置排除：

mangle: {
    except: ['foozah']
  }

注意：弹出后，您可以从 angular-cli.json 中删除弹出的 true 以再次执行或正常服务/构建。

"project": {
    "name": "test",
    "ejected": true //remove
  },