新设备上webpack-dev-server加载速度极慢问题排查求助

• 网络访问路径校验
  优先确认开发环境访问地址是否一致：两台设备是否都使用 http://localhost:端口号 访问页面，若台式机使用局域网IP、自定义hostname访问，会触发Windows防火墙校验、DNS解析等额外流程，直接拖慢加载速度。修改访问地址为localhost后重新测试。
• Windows安全软件校验
  两台设备的Windows Defender实时保护、第三方杀毒软件规则可能存在差异：
  1. 临时关闭台式机的实时保护功能，重载页面测试速度
  2. 若速度恢复正常，将项目目录、node.exe、Chrome/Edge的可执行文件路径加入杀毒软件的排除列表即可
• 系统hosts配置校验
  打开 C:\Windows\System32\drivers\etc\hosts 文件，确认是否存在localhost的错误解析规则，正常配置应当包含以下两行：

  127.0.0.1 localhost
  ::1 localhost
  

  若存在其他指向localhost的规则，注释后重新测试。
• webpack配置校验
  对比两台设备的devServer、devtool配置：
  1. 确认devtool是否为低性能配置，source-map/inline-source-map这类全量生成源码映射的配置，会大幅增加浏览器加载时的解析耗时，可临时替换为eval-cheap-module-source-map测试性能
  2. 检查是否开启了lazy编译、watchOptions.poll轮询规则，这类配置会导致编译完成后通知浏览器的时机延迟，拖慢重载时间
• 浏览器性能日志排查
  打开Chrome开发者工具的Network面板，勾选「Disable Cache」后重载页面，定位耗时最高的阶段：
  1. 若资源加载阶段耗时占比最高，对应排查文件读取、网络传输问题
  2. 若JS解析、执行阶段耗时占比最高，检查浏览器硬件加速是否开启，以及台式机后台是否有高CPU占用进程阻塞浏览器执行
  3. 可通过chrome://net-internals/#events记录页面加载过程的网络事件，排查是否存在DNS解析、代理跳转、TCP握手的异常耗时

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