Memory River

记忆河,记今日之事忆往昔之流

利用Nginx的gzip技术加快Vue项目首次加载的速度

Rickey  \  2018-12-21 15:35:05

刚接触vue技术没多久,这次的博客系统是我熟悉vue技术的一个练手网站,建设阶段的困难与辛酸是在所难免的了,这次主要谈谈在正式上线的部署运行遇到的问题。

问题:

1)站长我是穷人一枚,买的是阿里最便宜的云服务器,自己自娱自乐一下而已

2)博客网站首次加载时,由于vendor.js(实际名称是vendor****.js,中间还有很多随机字符)体积比较大(其实也就1.5M,是服务器渣,嘻嘻),加载时长需要12~14秒,整个网站首次访问加载时长在15秒左右,还是白屏!这是无法忍受的!

看着这网格,我心里着实不是滋味。

解决方案:

方案一:一开始就想着别折腾了,加个loading菊花上去,具体怎么加loading的转圈菊花,我后面会写一篇博文介绍。效果图如下:

博客上线45天了,刚好这几天公司也没什么任务给我(站长还是要有正式工作的),就利用空闲时间了解一下这方面的知识,让我发现了一个比较OK的方法。

方案二:我使用Nginx作为vue的代理的,所以只需要在Nginx这一层做点处理即可了。就是开启gzip来提高页面的加载速度。具体的修改先上代码。

在Nginx的配置文件nginx.conf的http中,加入以下代码配置段:

    gzip on; #开启或关闭gzip on off
	gzip_disable "msie6"; #不使用gzip IE6
	gzip_min_length 100k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
	gzip_buffers 4 16k; #buffer 不用修改
	gzip_comp_level 3; #压缩级别:1-10,数字越大压缩的越好,时间也越长
	gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #压缩文件类型
	gzip_vary off;  #跟Squid等缓存服务有关,on的话会在Header里增加 "Vary: Accept-Encoding"

加入代码截图如下:

上面每一句代码都有注释的,我这里要将一下gzip_types,这里配置需要使用gzip压缩的文件类型,这个文件类型可以通过以下方法获得:

通过浏览器F12开发者工具,可查看到文件的类型,把类型添加到Nginx的里,即可使用gzip服务了。

修改了Nginx的配置文件之后,重启Nginx,通过浏览器的F12查看是否正确启动了gzip服务,查看方法如下:

如图所示,即表示已经正确使用gzip进行文件的压缩了。

下面贴上本博客系统的首次加载情况:

大功告成!

成功的将网站首次加载从15秒内降到5秒内,大大的提升了体验的效果!(服务器渣,所以是5秒,1核1G内存1M宽带,别要求太高,哈哈)

标签: Nginxgzip
地址: http://wchuf.com/article/adt/f229981562c849c9a4020bee2c352bbf.html
声明: 本文为原创文章,版权归本站所有,欢迎分享本文,转载请保留出处!
  215         0         0
Rickey
人,可以无傲气,但不可以无傲骨。

YOU MIGHT ALSO LIKE

0 COMMENTS
想对博主说些什么?