Question

在缩小过程中会混淆类名，但这不应该

我尝试按照此处https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions所述的方式设置保留属性。不幸的是，这对我不起作用。

我有一个包含问题https://bitbucket.org/JohanBeumer/angular-ivy-aot/src/master/的bitbucket仓库。

我注意到我没有将最新消息提交到bitbucket，这是一个错误。抱歉，我更新了存储库。

我在该仓库中使用的自定义webpack配置如下：


module.exports = {
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true,
                    mangle: {
                        keep_fnames: true,
                        keep_classnames: true,
                        properties: {
                            reserved: ['Foo', 'BaseModel']
                        }
                    }
                }
            })
        ]
    }
};

我希望屏幕的标题显示班级的名称，即'Foo'。

我使用以下命令构建应用：ng build --prod --aot

我真正的问题是，如何防止webpack minify破坏类名？

感谢Tony Ngo的回复。我按照您的建议添加了keep_fnames，但不幸的是这不能解决问题。现在，我在控制台中收到以下错误：

Answer 1

只需完成这个问题即可。我最初在Webpack上创建了一个问题，后来在Angular-cli中创建了一个问题。

Webpack issue

Angular-cli issue

最重要的是，您可以配置terserPlugin，但是Angular会忽略该配置。

为节省时间，不要动态尝试获取类名，而是添加一个具有相同名称的属性并使用它。

Answer 2

默认情况下，您可以使用keep_fnames: true，函数名称将被修饰，因此keep_fnames表示保留函数名称

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          ecma: undefined,
          warnings: false,
          parse: {},
          compress: {},
          mangle: true,
          module: false,
          output: null,
          toplevel: false,
          nameCache: null,
          ie8: false,
          keep_classnames: undefined,
          keep_fnames: true, // change to true here
          safari10: false,
        },
      }),
    ],
  },
};

如何将Terserplugin配置为不破坏类名

2 个答案: