本博客js加载异常问题排查

zmisgod 发布于 2019-2-24 10:02:50 阅读 45 评论 0

起因

昨天(星期六)在公司加班到11点才走,因为我把crh相关的代码写好了,尤其是展示经过车站的图,我是用svg画的,想了半天,有写了半天才写出来的,svg相关的知识我都忘光了。。。

昨晚10点钟的时候我觉得万事具备,可以把我的新博客发布到正式环境了,于是我把代码提交上去,服务器拉代码,npm update && npm run build && npm run start,于是我就傻眼了,网站打开非常慢,旧版博客也是一个样,js根本就加载不出来,我当时没有想到,可能是我nginx配置有问题吧!

排查

于是我先看看是哪个js加载不出来,果然是最大的js加载不出来,就是vendor.js。我就在本地打了个生产包,此时提示说vendor.js太大了,有800kb,于是我就开始从此处优化。

nuxt.js 优化

因为我的这个博客项目前端使用的是nuxt.js支持ssr的vue框架,他的框架配置有一项就是将打包好的文件进行分析,然后自己排查哪个包过大,然后进行相应的优化。

#nuxt.config.js 文件
build: {
    analyze: true,
}

我这个博客还使用了element-ui,于是我怀疑是element-ui太大了,但是之前我用的是iview,这个貌似比element-ui功能更丰富,也没有这样龟速。然后我就开始打个生产包,client客户端打完包就此时编辑器自动会弹出一个网页,会显示此时整个应用哪些包占用多少,占用多的就会以很大的文字显示出来。就在此时,显示的是element-ui.common.js很大,有将近1M。那么怎么优化呢?只能按需加载模块了,应该可以节省点空间。

于是我按照element-UI上的按需加载模块,改完后,再次运行npm run build后如下图所示 image

没有上面的element-ui.common.js都是很小的js,应该可以了吧。

我就把代码上传上去,再次npm run start,js还是加载很慢!!!

难道是服务器问题,这个得分两种情况,是nginx配置还是nuxt.js中的服务端的代码有问题?

先去找nginx吧,如果是nginx有问题,加载慢应该有日志,于是我到ngixn的错误日志,发现了很多的错误日志

2019/02/24 07:54:00 [error] 8883#8883: *422287 connect() failed (111: Connection refused) while connecting to upstream, client: 106.11.37.219, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:00 [error] 8883#8883: *422289 connect() failed (111: Connection refused) while connecting to upstream, client: 118.180.34.152, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:00 [error] 8883#8883: *422291 connect() failed (111: Connection refused) while connecting to upstream, client: 124.239.239.166, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:01 [error] 8883#8883: *422293 connect() failed (111: Connection refused) while connecting to upstream, client: 116.211.182.210, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:03 [error] 8883#8883: *422295 connect() failed (111: Connection refused) while connecting to upstream, client: 111.44.252.76, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:03 [error] 8883#8883: *422297 connect() failed (111: Connection refused) while connecting to upstream, client: 119.84.130.24, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:04 [error] 8883#8883: *422299 connect() failed (111: Connection refused) while connecting to upstream, client: 1.199.92.50, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"
2019/02/24 07:54:04 [error] 8883#8883: *422302 connect() failed (111: Connection refused) while connecting to upstream, client: 219.147.154.68, server: zmis.me, request: "GET /test.html HTTP/1.1", upstream: "http://127.0.0.1:3000/test.html", host: "www.zmis.me"

卧槽,看起来不是代码的问题,是被人搞了。。。ip还不一样,应该是用的代理ip。。。

这个是error.log,我再去access.log看看,发现,此时发起者还在搞我。。。

36.248.192.205 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
223.111.28.35 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
60.28.176.166 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
124.227.27.36 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
223.87.182.21 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
223.111.26.37 - - [24/Feb/2019:09:47:48 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
113.105.171.38 - - [24/Feb/2019:09:47:49 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
61.134.110.22 - - [24/Feb/2019:09:47:49 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
117.180.227.207 - - [24/Feb/2019:09:47:50 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
1.194.227.81 - - [24/Feb/2019:09:47:50 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
106.15.218.156 - - [24/Feb/2019:09:47:50 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
124.239.234.150 - - [24/Feb/2019:09:47:50 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
221.180.137.152 - - [24/Feb/2019:09:47:51 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"
120.221.223.24 - - [24/Feb/2019:09:47:51 +0800] "GET /test.html HTTP/1.1" 302 170 "-" "Go-http-client/1.1"

于是我就tail -f access.log,此时nginx还在输出。。。于是我先把我的zmis.me这个域名302临时重定向到我的图片服务器,因为我的图片服务器走的cdn,一天有流量限制,用完就没了,无所谓的。

那么这下清楚了,原来是哪位老弟在压测我的博客,还是用go请求的,请求的是我非https的地址,不然不会出现302的状态码。

我猜这位老弟肯定忘记把这个服务关掉了,代理Ip貌似不便宜,他已经在我这里好几天了,我的nginx的日志都好几百兆了。。。我才发现。。。还好发现了。。。