Angular 5+压缩时class.name判断异常问题求解决

这个问题我之前在项目里也踩过坑！核心原因就是Angular生产构建时用的Terser（早期是UglifyJS）会对类名、函数名做混淆压缩，把长名称改成短的单字母，不同的类很可能被压缩成同一个名字，就出现了你看到的FirstClass.name和SecondClass.name都变成'e'的情况。

下面给你几个可行的解决方案，按需选择：

1. 手动给类添加静态name属性（推荐，体积影响小） #

直接在类里定义一个固定的静态name属性，硬编码类名，压缩工具不会修改这个显式赋值的静态属性：

class FirstClass {
  // 用readonly避免被意外修改
  static readonly name = 'FirstClass';
}

class SecondClass {
  static readonly name = 'SecondClass';
}

之后你的检查函数就能正常工作了，因为现在比较的是你手动定义的固定值，不再依赖原生的Function.name。

2. 用装饰器统一处理（适合多个类的场景） #

如果需要处理很多类，写重复代码太麻烦，可以创建一个装饰器来自动给类添加静态name：

// 定义装饰器
function PreserveClassName(target: Function) {
  // 把类的原始名称赋值给静态name属性
  target.name = target.name;
}

// 给类添加装饰器
@PreserveClassName
class FirstClass { }

@PreserveClassName
class SecondClass { }

TypeScript编译时会执行这个装饰器，把类的原始名称（压缩前的）赋值给静态name，这样压缩后这个属性值也不会被修改。

3. 修改构建配置，禁止混淆类名（不推荐，除非必要） #

如果你的项目里大量依赖Class.name，可以修改Angular的构建配置，让Terser保留类名和函数名。在angular.json的build配置里添加terserOptions：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "terserOptions": {
              "keep_classnames": true,
              "keep_fnames": true
            }
          }
        }
      }
    }
  }
}

⚠️ 注意：这个方法会保留所有类名和函数名，会显著增加打包后的体积，所以只在实在没办法的情况下使用。

最后提个最佳实践 #

尽量不要在业务逻辑里依赖Function.name来做判断，因为它本来就不是为业务标识设计的，很容易被压缩工具修改。如果需要区分不同的类，用自定义的静态属性（比如static readonly type = 'FirstClass'）是更可靠的方式。

内容的提问来源于stack exchange，提问作者Антон Терёшин