vue项目使用nginx部署,配置gzip到底有多香?

vue项目首屏加载优化,接触过vue项目的同学应该都有了解,这里不再赘述。今天主要分享一下gzip压缩对首屏优化的影响。

这里以nginx部署为例,vue项目打包时,我们直接生成gzip文件,如下:

vue项目使用nginx部署,配置gzip到底有多香?

nginx配置项中加上 gzip_static on; 表示如果有静态gzip,则使用静态资源,也就是上面生成的gzip文件。

nginx配置成功的标志是响应头的内容编码为gzip:

vue项目使用nginx部署,配置gzip到底有多香?

下面来看看 到底效率能提高多少?

以最大的文件vendor.js为例,在相同网络环境下进行测试:

  • 文件大小比对:压缩前为972k,压缩后为305k,文件大小相比为3倍。
  • 响应时间比对:测了5组数据,不配置gzip压缩平均响应时间为2.2秒,配置gzip压缩平均响应时间为0.38秒,响应时间相比为5.8倍。
  • 开启gzip压缩,能极大缩短响应时间,提升用户体验。当然项目不同,提升效果也会有差别。不支持gzip的浏览器几乎没有了(比如IE6),各位同学可以放心大胆的使用!

    来源:软件开发仲哥

    声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

    上一篇 2022年7月3日
    下一篇 2022年7月3日

    相关推荐