vue如何开启GZIP,nginx服务器如何开启Gzip

SOASPX 10307 0

vue开启GZIP

在config文件夹下的index.js  

// 修改
productionGzip: true,

需要安装npm install --save-dev compression-webpack-plugin  由于版本问题,建议安装1.1.11版本

即:

npm install --save-dev compression-webpack-plugin@1.1.11

vue关闭map,提高加载速度,不影响网站布局和数据

同样config文件夹下的index.js文件  修改productionSourceMap: false,


vue如何开启GZIP,nginx服务器如何开启Gzip-第1张图片-.net教程网


nginx开启Gzip

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

nginx开启Gzip时有作用域,分别是http   server   location;

开启成功之后,浏览器请求header里有Content-Encoding字段


vue如何开启GZIP,nginx服务器如何开启Gzip-第2张图片-.net教程网


开启GZIP后,网站请求速度会快很多,因为请求数据的体积变小了,未开启之前,如下图中js文件的大小在800kb左右,开启之后减少了很多


vue如何开启GZIP,nginx服务器如何开启Gzip-第3张图片-.net教程网



另外,配合CDN,请求速度会更快。

标签: vue GZIP nginx

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~