场景描述

        我们通常会将Vue项目打包放到nginx服务器中，但是打包后有些资源体积比较大导致界面加载速度慢。为了解决这个问题通常需要在项目打包和Nginx配置下手，打包时配置开启gzip压缩，nginx上同样也要开启gzip功能。

Vue打包配置

1、安装compression-webpack-plugin插件，此插件就是用于打包压缩的。
npm install --save-dev compression-webpack-plugin
2、配置WebPack文件，开启gzip压缩功能(文件位于config/index.js)。
productionGzip: true
3、输入命令打包查看效果。
npm run build
可以看到static/js/jquery.min.js的大小压缩到了一半以上。

Nginx开启gzip功能

1、配置Nginx文件
        nginx配置gzip后可以优化资源的加载速度。但是压缩会占用cpu的资源，在并发量高的时候可能会导致性能下降。为了解决这个问题需要开启nginx的静态压缩功能（gzip_static on），同时在webpack打包前端时配置压缩大的资源，这样上传到服务器的资源已经是压缩过了的，由于开启了静态压缩功能，nginx会找对应的gz压缩文件，若找到该文件就不会浪费cpu资源再此压缩，没找到再进行压缩。至此nginx的gzip压缩配置完成，具体配置如下：

# #开启和关闭gzip模式
gzip on;            
# #gizp压缩起点，文件大于10k才进行压缩
gzip_min_length 10k;
# # 配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
# # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 2 4k;
# # 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 6;   
# # 进行压缩的文件类型。
gzip_types application/javascript text/css;
# #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
gzip_static on; 
# # 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

2、重新加载配置文件，并查看压缩效果
/usr/local/nginx/sbin/nginx -s reload
压缩前： 压缩后（86K压缩的资源在网络传输过程中只用了30K）： 请求头里Accept-Encoding: gzip, deflate表示这个请求支持gzip的资源
响应头里Content-Encoding: gzip表示响应的资源时gzip的，告诉浏览器需要解压

注：
        gzip_static：off，则nginx每次都进行gzip压缩；
        gzip_static: on, 则nginx会找对应的gz文件，若找到该文件就不会浪费cpu资源再此压缩，没找到再进行压缩。
        gzip_static配置的时候遇到一个小问题，在安装完nginx之后，搜索一些资料，说配置gzip_static on;就可以了，后来发现启动都报错了，网上查找一遍才知道，原来用./configure默认配置nginx时，默认并没有安装有gzip static静态模块，而默认安装的是ngx_http_gzip_module，就是上面我们说动态压缩。 nginx提供有gzip static模块，我们想要使用它时，需要在安装nginx编译的时增加如下参数：
./configure --with-http_gzip_static_module