使用 webpack-dev-server 時，為什么 Chrome 會在每秒請求之前等待？

Question

有人可以幫助我了解初始連接前數百毫秒內發生的事情嗎？

它只發生在每個其他請求上，如圖所示。

請求是針對 ASP.NET Core Web 應用程序對 localhost 上的相同資源發出的 POST。

我也看過其他類似的問題和答案，但我沒有看到在初始連接之前什么都沒有的例子。 其他人似乎都有一個“停頓”或“排隊”的酒吧。

“短”請求如下所示：

Chrome 版本：74.0.3729.131（官方版本）（64 位）

更新 1 ：這在 Microsoft Edge 中不會發生。 每個請求都很短。 不用等。

更新 2 ：下載一個長請求的 HAR 文件顯示一個很長的“連接”時間：

 "timings": {
  "blocked": 1.135999995024409,
  "dns": 0.0030000000000000027,
  "ssl": -1,
  "connect": 301.202,
  "send": 0.18900000000002137,
  "wait": 79.29900000206612,
  "receive": 3.750999996555038,
  "_blocked_queueing": 0.8449999950244091
},

短的連接時間為 -1：

  "timings": {
      "blocked": 0.9680000060191378,
      "dns": -1,
      "ssl": -1,
      "connect": -1,
      "send": 0.091,
      "wait": 50.74499999642931,
      "receive": 2.582000000984408,
      "_blocked_queueing": 0.8130000060191378
    },

但為什么？

更新 3 ：事實證明，這只發生在通過 webpack-dev-server 代理時。 我也會添加那個標簽。 盡管如此，它仍然只發生在 Chrome 中。

更新 4 ：現在似乎是這種情況的摘要，使用時會出現該模式：

• 通過 webpack-dev-server 從 localhost:3000 -> localhost:3001 代理，而不是直接進入 localhost:3001 的端點時
• locahost:3000 作為 Chrome 中的地址，而不是使用 127.0.0.1:3000 時。
• Chrome（多個版本，包括 74.0.3729.131），而不是 Microsoft Edge
• Windows 10，而不是 Ubuntu 19.04

均在 NodeJS 10 和 NodeJS 12 中。在多台機器上進行了測試，並在隱身模式下使用 Chrome。

Answer 1

我將其作為問題發布在這里https://github.com/webpack/webpack-dev-server/issues/1850並找到了解決方案。

可以在問題討論中找到詳細信息，但解決方案是直接偵聽 IPv6 環回地址，例如：

const server = new WebpackDevServer(webpack(config), {
  hot: true,
  writeToDisk: false,
  historyApiFallback: true,
  contentBase: path.join(__dirname, 'src'),
  proxy: [{
    context: ["/api/**"],
    target: "http://localhost:5000",
    logLevel: 'debug'
  }]
});

// Listen on ::1, details here https://github.com/webpack/webpack-dev-server/issues/1850
server.listen(3000, '::1', err => {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
});