Gatsby develop成功后localhost 8000加载极慢，求助排查方案

Hey there, I totally get how frustrating this is when you're just starting out with Gatsby—let's break down what's happening and work through fixes step by step.

First, Let's Clarify Those Terms #

• webpack_hmr: This stands for Webpack Hot Module Replacement, a tool that lets you update components in the browser without full page reloads during development. When it's taking forever, it means the browser is stuck trying to establish or maintain a connection with the HMR server, blocking your page content from loading.
• Socket/Polling: HMR uses WebSockets by default to keep a live connection between your browser and the development server. If the WebSocket connection fails (for example, blocked by firewall/proxy), it falls back to "polling"—sending repeated HTTP requests to check for updates. All those socket/polling requests you see are the browser retrying this connection over and over, which eats up time.

Troubleshooting Steps to Try #

1. Check for Port Conflicts #

Sometimes another program is using port 8000 (Gatsby's default) or the secondary port HMR uses.

• On Mac/Linux, run this command to see what's using port 8000:

  lsof -i :8000
  

• On Windows, use:

  netstat -ano | findstr ":8000"
  

If you see an unrelated process using the port, close it, or run Gatsby on a different port:

gatsby develop -p 8080

2. Disable Firewalls/VPN Temporarily #

Firewalls, VPNs, or proxy tools often block WebSocket connections, which triggers the polling fallback. Try turning these off temporarily, then restart gatsby develop and refresh your browser.

3. Fix the @hot-loader/react-dom Setup #

You installed the package, but Gatsby needs to be told to use it instead of the default react-dom. Add this to your gatsby-node.js file (create the file if it doesn't exist):

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        'react-dom': '@hot-loader/react-dom',
      },
    },
  })
}

Then run:

gatsby clean && gatsby develop

4. Verify Contentful Connection #

Even with only two pages, a stuck Contentful API request could block page loading. Check your DevTools Network tab for any pending requests to Contentful's API. Make sure your API keys and space ID in gatsby-config.js are correct, and confirm Contentful's service is running normally.

5. Temporarily Disable HMR #

If none of the above works, turn off HMR entirely to see if the page loads normally. Add this to your gatsby-config.js:

module.exports = {
  developMiddleware: app => {
    app.disable('hot-module-replacement')
  },
}

Restart the dev server—if the page loads quickly, the issue is definitely tied to HMR configuration, and you can focus on fixing that specifically.

6. Update Dependencies #

Outdated versions of Gatsby, React, or related packages can cause compatibility issues with HMR. Run:

npm update gatsby react react-dom

Follow up with gatsby clean && gatsby develop to see if that resolves the slowdown.

Start with the simplest steps first (port check, firewall/VPN) since those are the most common culprits, then work your way through the list.

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