Chrome非活跃标签页中Vite开发服务器连接丢失问题求助

针对你遇到的Chrome非活跃标签页一段时间后触发Vite服务器连接丢失、页面自动重载的问题，可尝试以下几种修复方案：

• 调整Vite HMR的WebSocket心跳配置
  Chrome对非活跃标签的WebSocket连接会进行节流，导致Vite误判连接丢失。修改vite.config.js，延长HMR超时时间并增加心跳频率：

  // vite.config.js
  import { sveltekit } from '@sveltejs/kit/vite';
  
  export default {
    plugins: [sveltekit()],
    server: {
      hmr: {
        timeout: 30000, // 把超时时间延长到30秒
        heartbeat: 10000, // 每10秒发送一次心跳包维持连接
      },
    },
  };
  

• 禁用Chrome后台标签节流实验特性
  打开chrome://flags，搜索"Background Tab Throttling"，将其设置为Disabled，重启Chrome后测试。

• 强制Vite使用HMR轮询模式
  如果WebSocket连接始终被Chrome断开，可切换到轮询模式规避限制：

  // vite.config.js
  import { sveltekit } from '@sveltejs/kit/vite';
  
  export default {
    plugins: [sveltekit()],
    server: {
      hmr: {
        polling: true, // 启用轮询替代WebSocket
      },
    },
  };
  

• 检查Chrome电池节省模式
  即使关闭了内存节省，电池节省模式仍可能限制后台标签。打开chrome://settings/battery，关闭"电池电量较低时使用省电模式"，同时将你的开发域名添加到例外列表。

• 更新Vite和SvelteKit到最新版本
  旧版本可能存在与新版Chrome的兼容性问题，执行以下命令更新依赖：

  npm update @sveltejs/kit vite
  

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