javascript - webpack-dev-server 代理请求很慢

Question

我正在使用 webpack-dev-server 代理:

devServer: {
        proxy: {
            '/api': {
                target: 'http://mybackedn.url',
                changeOrigin: true
            }
        }
    }

请求花费太多时间。Chrome 网络面板显示:

为什么会这样？如何解决这个问题？

Answer 1

请求时间图中的灰色部分称为停顿时间，浅灰色部分(灰色之后)为排队时间。如果将鼠标悬停在瀑布图上，您可以看到相同的结果。这是导致问题的原因以及停滞时间的含义。

Stalled/Blocking

Time the request spent waiting before it could be sent. This time is inclusive of any time spent in proxy negotiation. Additionally, this time will include when the browser is waiting for an already established connection to become available for re-use, obeying Chrome's maximum six TCP connection per origin rule.

(如果您忘记了，Chrome 在悬停工具提示和“计时”面板下有一个“说明”链接。)

基本上，您会看到这种情况的主要原因是因为 Chrome 一次只能为每个服务器下载 6 个文件，其他请求将被暂停，直到连接槽可用。

这不一定是需要修复的东西，但避免停滞状态的一种方法是跨多个域名和/或服务器分发文件，同时保持 CORS请记住，如果适用于您的需求，但是 HTTP2 可能是 future 更好的选择。资源捆绑(如 JS 和 CSS 串联)也有助于减少停滞连接的数量。

或者您可以降低请求的优先级并在最后触发那些需要很长时间的请求，这样其余的请求就不会等待慢跑者。