前言

因为咱们团队的前端我的项目越来越宏大，加之Vue的SPA首屏加载个性，导致系统第一次加载速度越来越迟缓，可能达到几十秒的水平，所以为了优化用户性能体验，咱们抉择了开启Gzip进行文件压缩，的确达到了显著的成果。

什么是Gzip？

gzip是一种数据的压缩格局，或者说是一种文件格式。

Gzip本来用户UNIX零碎的文件压缩，起初逐步成为Internet最支流的数据压缩格局。
当用户拜访咱们的web站点时，服务器就将咱们的网页文件进行压缩，将压缩后的文件传输到客户端，对于纯文本文件咱们能够至多压缩到原大小的40%，这样大大提高了传输效率，页面便可更快的加载进去。

Nginx服务端配置Gzip服务

因为目前咱们我的项目是应用ngxin来部署前端的，nginx自带HttpGzip模块，所以咱们间接对nginx.conf文件的http配置项进行配置即可。但绝对的因为nginx本身解决申请而后压缩返回，会耗费对应的服务器内存。

    # 开启或者敞开gzip模块(on|off)    gzip on;    # 容许压缩的页面最小字节数, 默认值是0，不论页面多大都压缩。倡议设置成大于1k的字节数，小于1k可能会越压越大    gzip_min_length 1k;     # 设置零碎获取几个单位的缓存用于存储gzip的压缩后果数据流。例如 4 4k 代表以4k为单位，依照原始数据大小以4k为单位的4倍申请内存。    gzip_buffers 4 16k;     # 辨认http的协定版本。因为晚期的一些浏览器或者http客户端，可能不反对gzip自解压，用户就会看到乱码，所以做一些判断还是有必要的。    #gzip_http_version 1.0;    # gzip压缩比，1 压缩比最小处理速度最快，9 压缩比最大但解决最慢（传输快但比拟耗费cpu）。    gzip_comp_level 2;    # 匹配MIME类型进行压缩，（无论是否指定）"text/html"类型总是会被压缩的。    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;    # 和http头有关系，加个vary头，给代理服务器用的    gzip_vary off;    # 示意IE6及以下禁止压缩    gzip_disable "MSIE [1-6]\.";

测试成果

  • 开启gzip前

  • 开启gzip后

客户端压缩Gzip

咱们应尽可能减少对服务端内存的应用，毕竟服务端的资源是十分宝贵的，这里咱们依然应用nginx进行前端部署，咱们在客户端替nginx解决压缩文件这一步操作，nginx便可间接应用咱们压缩好的文件，上面是一个基于vue-cli配置的前端我的项目。

1、装置插件

这里最好装置低版本，避免报错。

npm install compression-webpack-plugin@5.0.1 -D

2、配置vue.config.js注册插件

这里能够依据大家不同的配置，总之就是将webpack插件进行注册。

const CompressionPlugin = require("compression-webpack-plugin");module.export = {    configureWebpack: {         plugins: [      new CompressionPlugin({        filename: "[path].gz",        //压缩算法        algorithm: "gzip",        //匹配文件        test: /\.js$|\.css$|\.html$/,        //压缩超过此大小的文件,以字节为单位        threshold: 10240,        minRatio: 0.8,        //删除原始文件只保留压缩后的文件        deleteOriginalAssets: false      })    ]    }}

3、运行打包命令

胜利运行后，便能够在打包文件中看到.gz结尾的文件了，将打包后的文件上传到指定的nginx文件夹下。

npm run build

4、配置nginx

这里须要nginx对应的插件http_gzip_static_module，之前我是通过yum装置的nginx，这里仿佛不能够，须要手动装置。这里目录能够依据大家集体状况而定。
装置nginx

cd /usr/local/src/wget http://nginx.org/download/nginx-1.18.0.tar.gztar zxvf nginx-1.18.0.tar.gzcd nginx-1.18.0/./configure --prefix=/usr/local/nginx --with-http_gzip_static_modulemake && make install

批改nginx.conf

cd /usr/local/nginx/conf/vim nginx.conf
server {        listen       80;        server_name  localhost;        location / {            root   html;            index  index.html index.htm;            try_files $uri $uri/ /index.html;            gzip_static on; #动态压缩        } }

启动nginx服务

cd /usr/local/nginx/sbin./nginx

5、测试成果

这里咱们尽管服务端js文件夹里只有.gz格局的文件（其余的文件已删除），但客户端却胜利读取了。


比照

无论是服务端与客户端进行gzip的压缩，咱们都大大放大了文件体积，给用户带来了更好的体验。
服务端解决gzip长处是只需配置一下即可，无需简单操作，但毛病是会耗费服务器内存。
客户端解决gzip长处是无需服务器进行文件压缩，缩小服务器内存耗费，但配置起来相比服务端gzip会稍加繁琐。

参考文档

Nginx中文文档
什么是GZIP,有什么劣势,如何开启GZIP?
vue-cli4 开发我的项目中开启gzip压缩，优化打包体积，晋升加载速度
Nginx gzip static动态压缩
配置nginx间接应用webpack生成的gz压缩文件，而不必nginx本人压缩