Nginx在Vue.js 项目中的应用

Nginx是我最喜欢的软件,没有之一!它小巧、功能强大!最近在尝试用Vue.js重写公司项目的移动站点,做一些前期的技术预研。在这个过程中用到了Nginx的一些功能。

(1)作为Web服务器

Vue项目编译打包后基本都是js、css、图片等静态文件,Nginx作为Web服务器最合适不过了,相对于apache、tomcat显得轻快、灵巧。简单配置如下:

(2)反向代理

由于移动站点使用了REST API,但UI界面完全一致。所以我直接使用了这些反代了生产环境、测试环境的接口,避免自己重新搭建项目环境。反代过程很简单,简单配置如下:

(3)开启Gzip压缩,减小JS、CSS、图片文件体积

在重写大部分功能之后,打包后发现JS文件比较大,vendor JS文件达到了800-900KB,严重影响加载和阻塞页面渲染,于是在路由中将一部分组件按组分块做了懒加载。分割之后的代码果然小了很多。如下图:

20170721154828

多次分割之后,感觉这已经是webpack下的压缩极限了。由于打包后的项目直接部署在Nginx下,所以我尝试使用Nginx的Gzip模块,这个模块可以大幅度节省传输时的文件大小。原理就是在打包时把要打包的类型文件压缩为gz类型文件,到客户端再解压。于是把Vue开启Gzip打包的配置(productionGzip),重新打包上传到服务器。配置Nginx的Gzip设置,重启服务再看传输大小,算是比较满意了!如下图:

20170721154856

两张图的数据对比来看:

大小:392KB–>124KB

请求传输时间:2.76s–>846ms

对应流量大的网站来说,经过多项优化之后确实可以减小带宽的负荷、缩减宽带费用,同时也提升网站的体验。当然你可以说这是运维同事干的工作,但是如果知道问题所在,我们应该掌握从多方面进行代码的优化,一起提升项目的用户体验。

文章写的相对简略,有些内容新手还是要进行Google的。当然,肯定还有很多进行优化的方法,比如CDN之类,那就暂时不是我们涉猎的范围。以后再表。