gulp-uglify压缩导致constructor.name取值异常如何解决

问题说明 #

• 在gulpfile.js中启用如下uglify压缩配置时，代码会被正常压缩混淆：

.pipe(uglify({ preserveComments: 'some'}))

• 未启用压缩时，位于mystudy.js文件closeIt函数内的判断语句可正常执行：

if(Mystudy.constructor.name != "MyStudyView")

• 启用压缩后，类名会被混淆为单字符短标识符，上述判断语句会被转换为如下形式，此时e.constructor.name返回值为"e"这类混淆后的短名称，而非预期的"MyStudyView"，导致原有判断逻辑完全失效：

if ("MyStudyView" != e.constructor.name)

• 要求：保留gulp-uglify压缩能力、不降低压缩效果的前提下，保证代码运行逻辑和未压缩状态完全一致。

问题根因 #

JavaScript中Function.prototype.name返回的是函数/类声明时的原始标识符名称，gulp-uglify默认会对非全局暴露的函数名、类名做混淆缩短处理，直接导致.name属性的返回值随混淆动作变化，所有依赖.name做字符串等值判断的逻辑都会受该压缩规则影响。

可行方案 #

方案1：改用自定义静态属性做类型判断（最优，零压缩率损失） #

完全不调整压缩配置，不改动压缩规则，只修改业务判断逻辑，避免依赖原生constructor.name属性：

1. 给MyStudyView类添加固定返回值的静态类型标记：

class MyStudyView {
  // 新增静态类型属性，返回值为固定字符串，压缩时不会被修改
  static get classTag() { return 'MyStudyView' }
  // 其余原有业务逻辑保持不变
}

2. 将原有判断语句替换为读取自定义静态属性的形式：

if(Mystudy.constructor.classTag != "MyStudyView")

该方案下所有代码依然会被正常压缩混淆，字符串字面量不会被uglify篡改，完全不影响压缩效果，也不会出现其他混淆导致的隐性问题。

方案2：配置uglify保留指定类名（无需改动业务代码，压缩率影响可忽略） #

如果不想改动原有业务判断逻辑，可以调整uglify的混淆规则，仅保留需要用到的类名，其余代码依然正常混淆，对整体压缩率的影响微乎其微：
修改gulpfile.js中的uglify配置，在mangle.reserved列表中加入需要保留名称的类名：

.pipe(uglify({
  preserveComments: 'some',
  mangle: {
    // 列出所有需要通过constructor.name读取名称的类/构造函数名
    reserved: ['MyStudyView']
  }
}))

配置生效后，uglify不会将列表内的标识符混淆为短名称，constructor.name就能正常返回预期的"MyStudyView"值，原有逻辑无需改动即可正常运行。

不建议直接全局关闭函数/类名混淆功能，会明显降低压缩率，也会增加代码暴露风险，仅按需保留必要标识符即可。

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