如何调试NX/Angular应用生产构建的优化错误？

第一步：生成未压缩的构建文件 #

执行带禁用优化参数的构建命令，让dist目录生成未压缩的main.js文件：

nx run my-app:build:production --optimization=false

此时dist目录会出现完整的非压缩main.js，直接打开找到第22080行查看代码。

第二步：定位语法错误 #

查看对应行的代码，重点排查以下常见问题：

• 无效的对象解构语法（比如const { key = } = target这种缺省值不完整的写法）
• 箭头函数参数语法错误（比如单参数省略括号但跟了默认值，像const fn = param = 1 => {}）
• 未正确闭合的语句或错误的赋值逻辑

第三步：关联到源码文件 #

如果未压缩代码还是难以对应到自己的源码，开启sourcemap重新构建：

nx run my-app:build:production --sourceMap=true --optimization=false

之后用浏览器开发者工具的Sources面板加载dist下的文件，就能直接跳转到对应的Angular源码文件和具体行号。

第四步：排查第三方依赖问题 #

如果自己的代码没有语法错误，检查是否引入的第三方库存在未转译的ESNext语法：

• 临时移除可疑的第三方依赖，重新构建验证
• 确认angular.json中build配置的allowedCommonJsDependencies是否包含了需要兼容的库

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