Question

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

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

我们跑的时候

ng build - pro

类名以随机名称缩小。

Answer 1

Angular cli生成器支持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 cli在内部使用webpack和uglify。一种解决方案是通过导出webpack配置来更改uglify中的选项。您可以通过运行ng eject和ng eject --prod

来查看webpack文件

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

Mangle = false将保留类名。在角度cli中缺乏webpack选项是一个很大的讨论。

你也可以设置这样的排除：

mangle: {
    except: ['foozah']
  }

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

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

Answer 3

使用terser的角度8。

这是我对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 4

使用angular-builders

添加到yantrab的角度为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 5

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

使用NG_BUILD_MANGLE=false $NG build --prod ...方法区分角度以避免对名称进行任何修饰。
使用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", ...
            ]
          }
        }
      })
    ]
  }
}

（n.b。确保您也运行过npm install --save-dev webpack！）

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

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

这两件事共同说明了角度构建过程，避免了重整，并让您配置的TerserPlugin实例在以后的阶段中进行重整，同时尊重您希望保持未重整的类。

Answer 6

mangle中的选项：

"mangle":{
   "keep_names" : true
}

保持班级名称不变。

Answer 7

建立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})来完全禁用了修改。

作为参考，这里是我修改的common.js文件

中的相关部分

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

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

7 个答案: