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

2019-03-15 14:52:20 +08:00
 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,如何分析加载很慢的原因 ?

13662 次点击
所在节点    程序员
24 条回复
zhoulouzi
2019-03-15 16:43:56 +08:00
@HarryQu curl 太原始了 浏览器里 network timing
HarryQu
2019-03-15 16:54:50 +08:00
@zhoulouzi 嗯,找到了!
@wunonglin 因为是自己学习和练手的项目,所以不急着开发和上 CDN。
Light3
2019-03-15 17:18:44 +08:00
F12 看哪个加载的慢嘛..
Phuasheng
2019-03-16 09:19:27 +08:00
先不说优化速度,先减少包的大小

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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/544977

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX