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

Question

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

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

当我们运行时

ng build -- pro

类名被缩小为一个随机名称。

Answer 1

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

类似于Rob's answer，我们不想担心维护@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 中，他们为大多数项目更改了代码优化器 from TerserPlugin to 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 2

通过执行以下操作可以避免损坏特定符号：

• 使用 NG_BUILD_MANGLE=false $NG build --prod ... 方法告诉 Angular 避免对名称进行任何修改。
• 使用 ngx-build-plus 将部分 webpack 配置与 angular 使用的配置合并。使用 terser 插件执行重整，但请确保将您不想被重整的名称的保留列表传递给它。

ng add ngx-build-plus

您可以使用的 webpack.partial.js 示例如下：

const terser = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new terser.TerserPlugin({
        terserOptions: {
          compress: false,
          mangle: {
            reserved: [
              "MyClassName1", ...
            ]
          }
        }
      })
    ]
  }
}

（注意，请确保您也运行过npm install --save-dev webpack！）

然后修改您的构建命令，使其具有以下形式：

NG_BUILD_MANGLE=false ng build --prod ... --extra-webpack-config webpack.partial.js -o

这两件事结合起来告诉 Angular 构建过程避免重整，并让您配置的 TerserPlugin 实例在稍后阶段进行重整，同时尊重您希望保持未重整的类。

Answer 3

使用angular-builders添加到 yantrab 对 Angular 8.2+ 的回答

在 angular.json 中

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

选项：

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

在额外的 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 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 5

angular 8 使用 terser。

这是我对angular builder 的配置：

module.exports = cfg => {
    const options = cfg.optimization.minimizer[cfg.optimization.minimizer.length - 1].options.terserOptions;
    options.keep_classnames = true;
    return cfg;
};

并将 terget 更改为 es6

Answer 6

根据 Andres M 的回答，您可以通过直接修改控制 Webpack 设置的 Angular 文件来禁用没有 ng eject 的修改：node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js

请注意，每当 @angular-devkit/build-angular 更新时，这将被覆盖，并且不受 Angular 或 NPM 支持（并且可能会杀死你的猫/导致核世界末日，不要说我没有警告你！）

我通过将 uglifyOptions 更改为 uglifyOptions: Object.assign(uglifyOptions, {mangle: false}) 完全禁用了 mangling。

作为参考，这是我修改后的common.js 文件中的相关部分

...
new UglifyJSPlugin({
  sourceMap: buildOptions.sourceMap,
  parallel: true,
  cache: true,
  uglifyOptions: Object.assign(uglifyOptions, {"mangle": false})
}),
...

Answer 7

mangle 中的选项：

"mangle":{
   "keep_names" : true
}

保持类名不变。

Answer 8

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

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

Mangle = false 将保留类名。 angular cli 中缺少 webpack 的选项是一大讨论 atm。

您也可以像这样设置排除项：

mangle: {
    except: ['foozah']
  }

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

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