Vue CLI3 开启gzip压缩

首先这个是需要后台帮忙配置的，后台不配合就不用看了。。。。

nginx 服务端开启Gzip

server
{
    listen 80 default_server;
    server_name 106.13.190.39;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/106.13.190.39;#上面是我服务器自己一些配置
    
    gzip  on;  #开启gzip压缩输出
    gzip_min_length 1k;  #最小压缩文件大小
    gzip_buffers 4 16k;  #压缩文件缓冲区
    gzip_comp_level 2;   #压缩等级
    #gzip_http_version 1.0; #压缩版本(默认1.1，前端如果是squid2.5请使用1.0)
    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 
    image/x-icon;    
    gzip_vary off; //是否放客户端也看到是否开启了
    ----------
}

Vue脚手架配置

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。

webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

npm i -D compression-webpack-plugin

在vue cli3.0 生成的项目里，可在 vue.config.js 中按照如下方式进行配置： 

压缩前后大小大致如下：

生成的压缩文件以.gz为后缀：

 一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip

要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。