为什么在使用 webpack-dev-server 时 Chrome 在每隔一个请求之前等待?
Why is Chrome waiting before every second request when using webpack-dev-server?
有人可以帮助我了解在初始连接之前的数百毫秒内发生了什么吗?
它仅在所有其他请求上发生,如图所示。
请求是针对 ASP.NET 核心 Web 应用程序对本地主机上的同一资源发出的 POST。
我也看过其他类似的问题和答案,但我没有看到在初始连接之前什么都没有的例子。其他人似乎都有 "Stalled" 或 "Queueing" 的栏。
"short" 请求如下所示:
Chrome版本:74.0.3729.131(官方版)(64位)
更新 1:Microsoft Edge 中不会发生这种情况。那里的每个请求都很短。等不及了。
更新 2:为长请求下载 HAR 文件会显示很长的 "connect" 时间:
"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
- Windows10,不是Ubuntu19.04
在 NodeJS 10 和 NodeJS 12 中。在多台机器上测试,并且 Chrome 也处于隐身模式。
我将此作为问题发布到此处 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/');
});
有人可以帮助我了解在初始连接之前的数百毫秒内发生了什么吗?
它仅在所有其他请求上发生,如图所示。
请求是针对 ASP.NET 核心 Web 应用程序对本地主机上的同一资源发出的 POST。
我也看过其他类似的问题和答案,但我没有看到在初始连接之前什么都没有的例子。其他人似乎都有 "Stalled" 或 "Queueing" 的栏。
"short" 请求如下所示:
Chrome版本:74.0.3729.131(官方版)(64位)
更新 1:Microsoft Edge 中不会发生这种情况。那里的每个请求都很短。等不及了。
更新 2:为长请求下载 HAR 文件会显示很长的 "connect" 时间:
"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
- Windows10,不是Ubuntu19.04
在 NodeJS 10 和 NodeJS 12 中。在多台机器上测试,并且 Chrome 也处于隐身模式。
我将此作为问题发布到此处 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/');
});