Webpack开发模式下/sockjs-node请求频繁问题咨询

Your initial guess is spot-on: those repetitive /sockjs-node/... requests are directly linked to Webpack's Hot Module Replacement (HMR) feature, which you've configured via webpack-hot-middleware in your dev setup.

What's Going On Here? #

SockJS is a library that provides a cross-browser fallback for real-time communication when native WebSockets aren't supported or blocked. Webpack HMR uses it to maintain a persistent connection between your browser and the development server. This connection lets the server push code updates to your app instantly without requiring a full page reload.

The requests you're seeing are part of SockJS's connection mechanism:

• Some are initial handshake requests to establish the connection.
• Others are periodic heartbeat checks to keep the connection alive.
• In cases where WebSockets can't be used, SockJS falls back to streaming or polling mechanisms, which generate those repeated requests.

Why Only in Development Mode? #

HMR is strictly a development tool—there's no need for live code reloading in production. Your production config doesn't include webpack-hot-middleware in the entry point or enable the HotModuleReplacementPlugin, so those requests vanish when you build for production.

Looking at Your Config #

In your dev entry, you've included:

'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true'

This line initializes the HMR client and sets up the SockJS connection using the /__webpack_hmr base path. That's why you see requests under /sockjs-node/—it's the endpoint SockJS uses for its communication.

If You Want to Reduce or Adjust These Requests #

If the requests are cluttering your network tab or causing minor performance hiccups, here are a few options:

• Filter them out in DevTools: In Chrome's Network tab, add -sockjs-node to the filter bar to hide these requests from view.
• Force WebSocket transport: If your environment supports WebSockets (most modern setups do), you can force the client to use them instead of fallbacks by adding &transport=ws to the middleware URL:

  'webpack-hot-middleware/client?path=/__webpack_hmr&reload=true&transport=ws'
  

  This should reduce the number of fallback requests.
• Disable HMR entirely: If you don't use hot reloading, remove the webpack-hot-middleware/client entry and the HotModuleReplacementPlugin from your plugins. But this is not recommended—HMR is a huge time-saver in development!

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