使用webpack-dev-server时，为什么Chrome会在第二个请求之前等待？

Question

有人可以帮助我了解初始连接之前几百毫秒内发生的情况吗？

它仅在显示的其他所有请求上发生。

请求是对ASP.NET Core Web应用程序对本地主机上相同资源进行的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/');
});