ionic serve无文件变更时无限触发重编译问题求助

我使用ionic serve命令测试Ionic应用构建时，在开发服务器完成初始编译加载应用后，即便未修改任何文件，应用仍会持续触发类似热重载的重编译操作，陷入无限循环。

日志示例：

Date: 2021-06-09T16:49:20.399Z - Hash: 6ad0d92ddcbced3a4d48
[ng] 133 unchanged chunks
[ng] Time: 2112ms
[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ℹ ｢wdm｣: Compiling...
[ng] ℹ ｢wdm｣: wait until bundle finished: /common.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /5.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /referral-referral-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /leaderboard-board-board-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /tabs-tabs-module.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /GothamRounded-Bold.otf
[ng] Date: 2021-06-09T16:49:23.177Z - Hash: 6ad0d92ddcbced3a4d48
[ng] 133 unchanged chunks
[ng] Time: 1980ms
[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ℹ ｢wdm｣: Compiling...
[ng] ℹ ｢wdm｣: wait until bundle finished: /leaderboard-board-board-module.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /default~onboarding-phone-verify-phone-verify-module~profile-profile-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /profile-profile-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /community-community-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /home-home-module.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /wallet-wallet-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /profile-settings-settings-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /waitlist-waitlist-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /marketplace-marketplace-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /runtime.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /polyfills.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /styles.js
[ng] Date: 2021-06-09T16:49:25.972Z - Hash: 6ad0d92ddcbced3a4d48
[ng] 133 unchanged chunks
[ng] Time: 2137ms
[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ℹ ｢wdm｣: Compiling...
[ng] ℹ ｢wdm｣: wait until bundle finished: /main.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /vendor.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /common.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /5.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /tabs-tabs-module.js
[ng] Date: 2021-06-09T16:49:28.928Z - Hash: 6ad0d92ddcbced3a4d48
[ng] 133 unchanged chunks
[ng] Time: 2313ms
[ng] ℹ ｢wdm｣: Compiled successfully.
[ng] ℹ ｢wdm｣: Compiling...
[ng] ℹ ｢wdm｣: wait until bundle finished: /common.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /referral-referral-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /leaderboard-board-board-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /home-home-module.js
[ng] ℹ ｢wdm｣: wait until bundle finished: /tabs-tabs-module.js.map
[ng] ℹ ｢wdm｣: wait until bundle finished: /5.js.map
[ng] Date: 2021-06-09T16:49:32.628Z - Hash: 6ad0d92ddcbced3a4d48
[ng] 133 unchanged chunks

应用仅在修改文件时才触发重编译

• 添加--no-live-reload参数运行，问题仍存在
• 关闭VSCode后在终端执行命令，问题仍存在
• 重启电脑
• 更新Chrome浏览器
• 回退到应用更早的版本
• 重新安装npm依赖包

• 操作系统：MacOS Big Sur
• npm：6.14.8
• NodeJS：12.19.0
• Ionic CLI：5.14.16
• Ionic Framework：@ionic/angular 4.11.13
• @angular/cli：8.1.3

优先排查文件变更触发源 #

该问题核心是webpack文件监听器收到了文件变更信号，优先检查项目是否放在iCloud同步目录下（桌面、文档等MacOS默认同步目录），iCloud同步过程中会自动修改文件元数据，触发编译监听。将项目移动到非iCloud同步目录后重新执行ionic serve即可解决90%以上同场景问题。

调整Angular开发服务配置 #

如果移动目录无效，修改项目根目录下的angular.json配置，在architect > serve > options节点下添加轮询监听和排除规则，避免系统临时文件触发编译：

"options": {
  "browserTarget": "app:build",
  "poll": 1000,
  "exclude": [
    "node_modules/**",
    "**/*.log",
    "**/.DS_Store"
  ]
}

绕过Ionic CLI封装逻辑 #

如果上述方案无效，可以直接执行ng serve命令启动原生Angular开发服务，跳过Ionic CLI的封装层，即可正常触发监听逻辑。

额外排查项 #

检查本地是否安装了全局自动格式化、自动备份类工具，将项目目录加入对应工具的忽略列表，避免工具后台修改文件触发编译。

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