通过 Nginx 访问静态资源，加载很慢，如何分析问题 ？

[HarryQu]

使用 vue 写了个项目练手，发现 js 加载很慢。

网站： http://www.hi-cat.cn

js : http://www.hi-cat.cn/static/js/vendor.9af8cbe972dffd99c357.js 大小 620 k。

服务器配置 ：2 核 8g 5M 带宽

nginx 版本 ：1.15.8

nginx 配置 ：

server {
    listen 80;
    listen [::]:80;

    root /var/www/hi-cat.cn;
    index index.html;
    server_name www.hi-cat.cn;
    access_log /var/log/nginx/hi-cat.access.log;
    error_log /var/log/nginx/hi-cat.error.log;

    location  / {
        try_files $uri /index.html ;
    }
    location  /api {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host        $host;
        proxy_redirect off;
    }

}

我发现页面再在加载 http://www.hi-cat.cn/static/js/vendor.9af8cbe972dffd99c357.js 的时候所使用的时间不固定 ,很多时候需要花费 3~4s 时间。

服务器上也没有跑其他程序， 我 5M 的带宽 ，为什么加载时间会这么长？

如果我的 nginx 没有开启 gzip 压缩的话 ， 文件大小在 1.7m ，加载时间会达到 8s。

不考虑使用 CDN，也不考虑优化 JS，如何分析加载很慢的原因 ？

排查了一下，发现我的 Chrome 开启了 Disable cache 功能 。

关闭之后 , 加载速度稳定在 300ms ~ 2s

[xiangyuecn]

还要分析？你不说了原因吗。。。5M

[shuax]

你不会以为 5M 的意思是 5m/s 吧

[HarryQu]

@xiangyuecn
5M 带宽理论上来讲下载一个 620KB 的文件，需要 1s 多 ， 可实际都已经达到了 4S。

[aniua]

5Mbps=640KBps，理想情况下单这个文件下载就需要 3s 左右，加载页面时浏览器是并发下载，你这么慢就不意外了啊。
下次就快了，浏览器会缓存 js。

[Lax]

都用了什么库？这么简单个页面不至于 620KB 啊

[aniua]

@HarryQu 我这边测试下载你这个文件，最快是 2.2s ，考虑到建立连接的开销，这个速度没什么问题。

结论是，无需优化 /提高 Gzip 等级 /加钱升级带宽。

[MonoLogueChi]

我看到的情况是，你已经开启了 gzip 压缩，资源全部请求完成时长 1.9s ，那个 js 总共用时 650ms，TTFB 30ms，速度中规中矩，可能是你测试环境的问题吧

[Juszoe]

既然你用的腾讯云，建议使用腾讯云对象存储服务，存放静态文件，减少服务器带宽压力

[wunonglin]

静态文件为什么不用 cdn ？

[grewer]

把 vendor 拆一下,并行加载 可缩短 0.5s

[HarryQu]

@Lax
现在主要排查问题，我隐藏了很多页面的入门，如果 nginx 不开启 gzip 的 ，js 大小为 1.7M
依赖如下 ：

"axios": "^0.18.0",
"element-ui": "^2.5.4",
"highlight.js": "^9.14.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"marked": "^0.6.0",
"moment": "^2.24.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.4",
"vue-router": "^3.0.1",
"vuex": "^3.1.0",
"vuex-persistedstate": "^2.5.4"

[HarryQu]

@wunonglin 自己项目，页面正在开发中，主要奇怪我 5M 带宽加载这么小的文件，为什么需要那么久。

[HarryQu]

@grewer 是该研究一下拆分 vendor， 没开 gizp 的话 ，1.7M 大小。
@MonoLogueChi 是我环境问题，我的 Chrome 开启了 Disable cache 之后。win 下强制刷新 文件下载时间才那么长。

[zhoulouzi]

解析 建连 首包 传输时间 拿出来分析啊

[234747005]

首先，你的服务器在美国，这个的网络延迟就已经很严重了。
js 文件还是尽力减肥吧，不行的话就做资源分离。

[HarryQu]

@zhoulouzi Thanks，是用 curl 吗 ？
刚才才知道可以通过 curl 分析请求耗时情况

[keepeye]

国外服务器？延迟 丢包啥的

[HarryQu]

@234747005 服务器是腾讯云的，在广州 。
@keepeye 发现是 Chrome 打开了 Disable cache 之后， 多次强制刷新，会导致每次请求加载很慢。

[yc8332]

就是你带宽小。。600k+的文件，你要小水管，那必须好几秒啊

[wunonglin]

@HarryQu 现在与其纠结加载太慢不如先开发上线后先用 cdn 撑着再去优化过大问题

[zhoulouzi]

@HarryQu curl 太原始了 浏览器里 network timing

[HarryQu]

@zhoulouzi 嗯，找到了！
@wunonglin 因为是自己学习和练手的项目，所以不急着开发和上 CDN。

[Light3]

F12 看哪个加载的慢嘛..

[Phuasheng]

先不说优化速度，先减少包的大小

webpack bundle analyzer 看下哪些包比较大，不用的直接去掉，相信我，能减少很多很多