WebPack+TerserPlugin：mangle 忽略属性和类名——被破坏的代码质量很差

Question

生成的代码被缩小但几乎没有被破坏。这是它在谷歌浏览器中的样子（美化）：

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

• mangle：真的，
• 源地图：假，
• keep_fnames：假，
• 顶层：真实，

这是 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: './',
    }   

}

我在配置中遗漏了什么吗？

Answer 1

不幸的是，这儿没有的解决方案，并且此代码已经是您可以使用 Terser 获得的最好的代码。

\n\n\n\n

但是，我找到了一个完美的解决方案：“ JavaScript obfuscator ”\n \xe2\x80\x93 https://github.com/javascript-obfuscator/javascript-obfuscator#readme

\n\n

及其 WebPack 插件：“ javascript-obfuscator plugin for Webpack ”\n\xe2\x80\x93 https://github.com/javascript-obfuscator/webpack-obfuscator

\n\n

在 Google Chrome 中美化后的 JS 文件将如下所示：\n

\n\n

顺便说一句，就我而言，它只大了约 35%。

\n\n\n\n

所以，总结一下，您所需要的一切，只是为了：

\n\n

\n
1. 安装“Webpack 的 javascript-obfuscator 插件”：“npm install\n--save-dev webpack-obfuscator”
\n
2. 并将插件添加到 WebPack：
\n

\n\n

const JavaScriptObfuscator = require(\'webpack-obfuscator\');\n\n// ...\n\n// webpack plugins array\nplugins: [\n    new JavaScriptObfuscator ({\n      rotateUnicodeArray: true\n  }, [\'excluded_bundle_name.js\'])\n],\n

\n\n

就这样！

\n

Answer 2

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

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

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

这种方法的琐碎部分：

• 我的命名目前与我使用的外部库中的命名不匹配。在未来的库版本中无法保证这一点。
• 它使我原来的 src 有点难看。

Answer 3

mangle: { properties: true }如果您不进行内省或其他在 TypeScript 中不常见的魔法，那么这是安全的：

class MyClassName {
    constructor(public arg: string) {
        console.log(arg);
    }

    getContext() {
        console.log("I'm not mangled because I might be a HTMLCanvasElement.getContext");
    }

    someCustomMethodName() {
        console.log("What's my name?");
    }
}

const x = new Foo("Hello world");
x.getContext();
x.someCustomMethodName();

将变成

(() => {
    const e = new class {
        constructor(e) {
            this.o = e, console.log(e);
        }

        getContext() {
            console.log("I'm not mangled because I might be a HTMLCanvasElement.getContext");
        }

        t() {
            console.log("What's my name?");
        }
    }("Hello world");
    e.getContext(), e.t();
})();