启用优化导致Angular站点运行异常，寻求原因及解决方法

可能的原因 #

1. 第三方依赖库不兼容压缩混淆 #

不少老库或者打包不规范的第三方依赖，在经过Angular的Terser等优化工具压缩后会出现异常——比如依赖全局变量、使用eval、类的写法不符合ES6规范，都会导致压缩后构造函数调用失败（比如你遇到的Class constructor xe cannot be invoked without 'new'这类错误）。

2. 代码存在不符合ES规范的写法 #

常见的坑包括：

• 使用arguments.callee这类严格模式下禁用的特性，压缩后直接失效
• 修改Array、Object等内置对象的原型方法，压缩工具会误处理
• 通过字符串拼接的方式调用函数（比如window[funcName]()），压缩后函数名被替换导致找不到
• 用普通函数模拟类却用new调用，或者ES6类不用new调用

3. Angular版本与构建工具不兼容 #

部分Angular版本和配套的CLI、Webpack、Terser存在已知的优化bug，特定版本的压缩逻辑会破坏代码结构，导致随机的运行时错误。

4. 自定义构建配置过度优化 #

如果在angular.json中手动调整了优化相关配置，比如过度开启Terser的压缩选项，可能会误删或篡改正常代码逻辑。

具体解决方案 #

1. 定位并处理有问题的第三方库 #

• 逐个移除近期新增的依赖，重新构建测试，找出引发问题的库
• 若确认是某个库的问题，在angular.json的build配置中让Terser跳过该库的压缩：

  "build": {
    "options": {
      "terserOptions": {
        "exclude": ["node_modules/xxx-lib/**/*.js"]
      }
    }
  }
  

2. 修复代码中的不规范写法 #

• 把arguments.callee替换为具名函数
• 避免修改内置对象原型，改用独立的工具函数实现需求
• 不要依赖函数/变量的字面名称，改用映射表维护名称与函数的对应关系
• 确保ES6类必须用new调用，普通函数不要用new调用

3. 对齐Angular相关依赖版本 #

• 查看Angular官方Release Notes，确认当前版本是否有优化相关的已知bug
• 升级到最新稳定版，或者降级到验证过无问题的版本，同时保证@angular/cli、webpack、terser等依赖版本和Angular版本匹配

4. 逐步调整优化配置定位问题 #

• 拆分优化选项，逐个测试：

  # 先只开启脚本优化
  ng build --optimization scripts=true styles=false fonts=false
  # 再单独测试样式和字体优化
  ng build --optimization scripts=false styles=true fonts=false
  

• 如果是Terser的问题，可在terserOptions中禁用风险较高的压缩选项：

  "terserOptions": {
    "compress": {
      "unsafe_comps": false,
      "unsafe_methods": false,
      "pure_getters": false
    }
  }
  

5. 生成可调试的优化构建包 #

为了方便排查压缩后的错误，生成保留原始变量名且带Source Map的优化包：

ng build --optimization true --source-map true --build-optimizer false

这样既能看到优化后的代码运行情况，又能通过Source Map定位到源码中的错误位置。

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