typescript - WebPack + TerserPlugin : mangle ignores properties and class names – poor quality of the mangled code

生成的代码是缩小后的，但是几乎却没有损坏。这是在Google Chrome(已美化)中的外观:



所有属性名称，很多变量都有其原始名称。
即使明确指定了Terser的mangle选项:

mangle:是，

sourceMap:false，

keep_fnames:false，

顶级:true，

这是WebPack配置:

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

module.exports = {
    entry: './src/scripts/index.ts',
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    loader: 'ts-loader',
                    options: { configFile: 'tsconfig-build.json' }
                },
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: [ '.tsx', '.ts', '.js' ],
    },
    plugins: [ ],

    // PROBLEMS HERE:
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
            sourceMap: false,
            extractComments: false, // To avoid separate file with licenses.
            terserOptions: {
                mangle: true,
                sourceMap: false,
                //keep_classnames: false,
                keep_fnames: false,
                toplevel: true,
            },
        })],
    },

    output: {
        path: path.resolve(__dirname, resultDirPath),
        filename: 'main.js',
        publicPath: './',
    }

}

我在配置中错过了什么吗？

最佳答案

我相信在您的原始配置中，您需要添加mangle.properties，以使您的ES6类方法和数据成员受到破坏。为了避免破坏外部库，我使用与下面的正则表达式匹配的前缀策略来“唯一”命名要被破坏的所有方法和数据成员。

            new TerserPlugin({
                terserOptions: {
                    mangle: {
                        properties: {
                            regex: /(^P1|^p1|^_p1)[A-Z]\w*/
                        }
                    }
                }
            })

        "terser-webpack-plugin": "^2.2.1",

这种方法的缺点:

我的命名当前与我正在使用的外部库中的命名不匹配。在将来的库发行版中无法保证这一点。

它使我原来的src有点难看。