Vite本地开发服务器无限加载问题（Windows+Chrome环境）

• 关闭Chrome DevTools的强制禁用缓存
  打开DevTools后切换到Network面板，取消勾选「Disable cache」选项。Vite的热更新依赖合理的缓存策略，强制禁用缓存会导致资源请求出现阻塞。

• 调整Vite服务器核心配置
  修改vite.config.js，添加以下配置项，规避Windows文件系统和DevTools的交互冲突：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    server: {
      watch: {
        usePolling: true, // Windows下强制启用文件轮询监听，解决系统监听延迟
        interval: 1000,
      },
      hmr: {
        clientPort: 5173, // 强制指定HMR的客户端端口，避免和DevTools端口冲突
      },
    },
    optimizeDeps: {
      include: ['react', 'react-dom'], // 提前预构建核心依赖，减少动态加载阻塞
    },
  })
  

• 重置Chrome DevTools配置
  进入Chrome的「设置」→「高级」→「重置并清理」→「将设置恢复为原始默认设置」。部分自定义的DevTools插件或面板配置可能和Vite的WebSocket通信逻辑冲突。

• 修改Chrome启动参数
  右键Chrome快捷方式→「属性」，在「目标」栏末尾添加--disable-features=InspectorSocketResolver，禁用新版调试协议的socket解析逻辑，避免和Vite的HMR连接冲突。

• 临时应急方案
  如果上述方案暂时无效，可以先启动Vite服务器，等页面完全加载后再打开DevTools；或者改用Firefox浏览器进行开发调试，Firefox的DevTools不会触发该阻塞问题。

内容的提问来源于stack exchange，提问作者Endre Szabó