Vue项目性能优化-TTFB

百花缭乱

Tough and tender

Waiting(TTFB)

TTFB全称Time To First Byte，是指网络请求被发起到从服务器接收到地一个字节的这段时间。包含了TCP连接时间、发送HTTP请求时间和获得相应消息第一个字节的时间。

通过在网上查询相关问题可能是因为

服务器性能问题，后台数据处理出现问题。（概率不大，有问题就是大问题）
Nginx反向代理过程出现问题或者webpack-dev-server的问题
DNS解析的问题（一般只有最开始的第一次）
TCP/IP丢包率过高

Terminal的报错信息是[HPM]Error occurred while trying to proxy request ...(ECONNRESET)

查了一下官方的文档给出的解释是

ECONNRESET (Connection reset by peer): A connection was forcibly closed by a peer. This normally results from a loss of the connection on the remote socket due to a timeout or reboot. Commonly encountered via the http and net modules.

前面的requrest阻塞起来导致后面的request因为timeout被强制关闭了。石锤问题就在于proxy，或者说webpack-dev-server。

Google了一下发现大部分出现类似问题可以通过调整express的body-parser位置来解决问题。但是现在两个项目是一个Vue另一个是React，基本没有后台express逻辑之类的编写，一头雾水。

经过反复对比，发现问题确实在webpack的proxy上面，于是把热更新的proxy换成nginx反向代理，代码如下：

// webpack.config.js
devServer: {
    // 设置反向代理
    proxy: {
        '/view-image': {
            target: 'https://yige.wangzhi',
            secure: false,
            changeOrigin: true,
// nginx.conf
server {
    charset utf-8;
    client_max_body_size 128M;
    listen 8088;
    root /home/.../dist;