Webpack-dev-server代理请求非常慢

Question

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

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

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

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

Answer 1

请求时间图中的灰色部分称为停滞时间，浅灰色部分（灰色之后）是排队时间。如果将鼠标悬停在瀑布图上，您可以看到相同的内容。这是导致问题的原因以及停滞时间意味着什么。

停滞/阻塞

请求在发送之前等待的时间。这段时间包括在代理协商中花费的任何时间。此外，该时间将包括浏览器等待已建立的连接可供重复使用的时间，并遵守 Chrome 的每个源规则最多 6 个TCP 连接。

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

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

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

或者，您可以取消请求并在最后触发需要很长时间的请求，以便其余请求不会等待慢跑者。