Astro框架WebSocket性能异常求助：未配置却出现请求

先明确原因 #

你在浏览器网络面板看到的client.ts发起的WebSocket请求，是Vite开发服务器的热更新（HMR）连接——Astro基于Vite构建，开发模式下默认会启动这个连接，用来实时同步代码修改到页面，不需要你手动配置，属于框架正常行为。

解决方案分两种场景处理 #

1. 生产环境：无需处理，默认自动移除

生产构建时，Vite会自动剔除所有HMR相关代码（包括这个WebSocket连接和client.ts的相关逻辑）。执行npm run build生成生产包后，再用npm run preview预览，你会发现网络面板里不会再有这个WebSocket请求。

2. 开发环境：按需调整配置

如果开发模式下这个WebSocket确实造成了性能问题（比如本地网络波动导致频繁重连），可以通过Astro配置文件修改，绝对不要删除client.ts文件（删除会导致开发服务器功能异常，甚至无法启动）：

• 完全禁用热更新：
  在项目根目录的astro.config.mjs中添加以下配置：

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    vite: {
      server: {
        hmr: false
      }
    }
  });
  

  代价是修改代码后需要手动刷新页面才能看到变化。

• 替换WebSocket为轮询模式：
  如果不想禁用热更新，可改用HTTP轮询代替WebSocket，适合WebSocket被拦截的环境：

  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    vite: {
      server: {
        hmr: {
          polling: true,
          clientPort: 24678 // 对应你的Astro开发服务器端口，默认是24678
        }
      }
    }
  });
  

额外排查点 #

如果生产环境依然出现这个WebSocket请求，说明你的构建配置可能有误——检查astro.config.mjs中是否意外开启了HMR的生产模式支持，默认情况下Astro+Vite在生产环境会自动关闭HMR。

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