为何localhost突然运行缓慢？npm start启动React项目时一直加载

全局环境类问题（任意项目均异常的高频诱因） #

• Node/NPM版本不兼容
  若近期自动更新过Node或NPM版本，可能与React脚手架的默认配置不匹配。先执行node -v和npm -v确认版本，Create React App官方推荐使用16.x_{18.x的LTS版本Node，对应NPM版本为8.x}9.x，版本过高容易出现编译阻塞问题。可通过NVM切换回此前正常使用的版本验证。
• 全局NPM缓存损坏
  执行npm cache clean --force清理全局缓存，任选一个项目删除node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖后再启动验证。
• hosts配置异常
  近期修改过hosts文件可能导致localhost指向错误。打开对应路径的hosts文件（Windows：C:\Windows\System32\drivers\etc\hosts，Mac/Linux：/etc/hosts），确认存在127.0.0.1 localhost的配置，无其他异常的localhost指向规则。
• 系统代理/防火墙拦截
  近期开启的全局代理、更新的防火墙规则可能拦截本地Node服务请求。临时关闭系统代理和防火墙后再启动项目，验证是否能正常访问。
• 全局Create React App包损坏
  若使用全局安装的Create React App初始化项目，全局包损坏会导致所有新项目启动异常。执行npm uninstall -g create-react-app卸载全局包，后续初始化项目统一使用npx create-react-app 项目名即可。

项目运行时排查 #

• 启动后确认终端输出的编译状态，是否有报错提示，直接使用终端输出的访问地址访问，避免手动输入的地址与实际启动地址（比如默认启动在0.0.0.0、非3000端口）不匹配的问题。
• 若终端显示编译完成但页面一直加载，打开浏览器控制台查看网络请求和报错信息，使用Ctrl+Shift+R强制刷新页面，或开启无痕模式访问验证是否为浏览器缓存问题。

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