Angular 12升级并迁移eslint后保存文件编译延迟问题求助

问题排查方向 #

首先区分问题属于VSCode侧还是Angular项目侧：

• 关闭VSCode，直接使用系统终端执行npm run dev，启动完成后手动修改src目录下的任意文件并保存，观察编译触发时间：如果仍存在2分钟延迟，说明问题出在Angular项目配置/依赖，否则为VSCode插件或配置导致。

VSCode侧问题修复方案 #

如果确认是VSCode导致：

• 调整ESLint插件配置：打开VSCode设置，将eslint.run改为onType，取消勾选eslint.autoFixOnSave，避免保存时全量扫描项目代码导致文件写入延迟。
• 禁用非必要的第三方插件，尤其是Angular辅助类、代码校验类插件，逐一排查是否存在插件占用文件锁导致保存触发慢的问题。

Angular侧问题修复方案 #

如果确认是Angular项目本身导致，可按以下优先级优化：

1. 适配Ivy编译依赖
   你项目中依赖的ng-pick-datetime@7、ngx-color@4等低版本包未适配Angular 12的Ivy编译引擎，Angular每次编译时都会通过ngcc重复处理这类ViewEngine格式的兼容包，导致监听卡顿。要么将这类依赖升级到适配Angular 12的版本，要么在tsconfig.json中排除对应依赖的类型检查路径。
2. 优化ng serve启动参数
   修改package.json中的dev命令为：

"dev": "ng serve --live-reload true --poll 500 --aot false"

• --poll 500采用轮询模式监听文件变更，可解决WSL、网络共享盘等特殊文件系统下监听失效的问题
• --aot false关闭开发模式下的默认预编译，大幅提升增量编译速度

3. 升级Angular小版本
   你当前使用的Angular 12.0.3属于早期迭代版本，存在多个已知的增量编译性能bug，升级到12.2.x系列的最终LTS版本可直接修复相关问题。
4. 减少监听扫描范围
   在angular.json的projects.<你的项目名>.architect.build.options配置项中添加：

"exclude": ["**/*.spec.ts", "node_modules/**/*"]

减少webpack需要监听扫描的文件数量，提升变更检测效率。

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