google-chrome-devtools - 使用 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/');
});