使用grunt-contrib-uglify压缩代码时jQuery函数被混淆的问题咨询

问题根源 #

你之前的配置仅在mangle层级配置了reserved: ['jQuery']，该配置仅用于保留全局变量名不被混淆，不会影响属性名混淆规则。你开启mangle.properties: true后，Uglify会默认混淆所有对象的属性名，jQuery实例的on、click等方法也会被当作普通属性混淆为单字母名称，自然会出现方法未定义的报错。

可行解决方案 #

根据你的需求（仅混淆自定义对象属性，不影响jQuery方法），推荐以下两种方案二选一即可：

方案1：配置属性保留列表

在mangle.properties下单独配置reserved数组，将所有你用到的jQuery内置方法名加入列表，即可避免这些属性被混淆，示例配置如下：

uglify: {
    all: {
        options: {
            sourceMap: true,
            nameCache: 'temp/grunt-uglify-cache.json',
            mangle: {
                toplevel: true,
                properties: {
                    // 按需添加所有用到的jQuery方法名即可
                    reserved: ['on', 'off', 'click', 'html', 'val', 'addClass', 'removeClass', 'attr', 'data']
                }
            }
        },
        files: [{
            expand: true,
            flatten: true,
            cwd: 'Content/Scripts/',
            src: ['app.js'],
            dest: 'Content/Scripts/',
            ext: '.min.js',
        }]
    }
},

方案2：仅混淆显式声明的属性

如果不想手动维护jQuery方法列表，可以开启mangle.properties.undeclared: false配置，该配置规则下Uglify仅会混淆你在当前代码中显式定义过的对象属性，jQuery这类外部库的属性因为没有在当前业务代码中声明，会被自动跳过混淆，完全符合你仅混淆自定义属性的需求，示例配置如下：

uglify: {
    all: {
        options: {
            sourceMap: true,
            nameCache: 'temp/grunt-uglify-cache.json',
            mangle: {
                toplevel: true,
                properties: {
                    undeclared: false
                }
            }
        },
        files: [{
            expand: true,
            flatten: true,
            cwd: 'Content/Scripts/',
            src: ['app.js'],
            dest: 'Content/Scripts/',
            ext: '.min.js',
        }]
    }
},

补充说明

如果你是将jQuery源码和业务代码合并后统一压缩，还可以复用同一个nameCache文件先压缩jQuery、再压缩业务代码，保证二者的属性混淆规则一致，也能解决方法映射错误的问题，不过通常更推荐直接使用官方预压缩的jQuery版本，无需自行压缩。

内容的提问来源于stack exchange，提问作者cognophile