开启Gzip压缩进行前端优化#记录

一、Gzip工作原理

1、浏览器请求url，在请求头中设置属性accept-encoding：gzip。表明浏览器支持gzip，这个参数是浏览器自动会携带的请求头信息。
2、服务器收到浏览器发送的请求之后，服务器会返回压缩后的文件，并在响应头中包含content-encoding: gzip；如果没有压缩文件，返回未压缩的请求文件。
3、浏览器接收到到服务器的响应，根据content-encoding: gzip 响应头使用gzip策略去解压压缩后的资源，通过content-type内容类型决定怎么编码读取该文件内容。

二、三种使用Gzip压缩方法

第一步，下载compression-webpack-plugin

cnpm i compression-webpack-plugin --save

1、Nginx配置（耗费服务器性能）

server {
        listen       80;
        server_name  localhost;
        location / {
            try_files $uri $uri/ /index.html;
            root C:/nginx-1.18.0/html/gzip/dist;
            index  index.html index.htm;
        }
        location /api/ {
            proxy_pass http://localhost:6666/;
        }
        
        # 主要是下方的gizp配置哦，直接复制粘贴就可以使用啦，亲测有效哦
        gzip on; # 开启gzip压缩
        gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
        gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
        gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
        gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
                 # 压缩的文件类型 MIME类型，百度一下，一大把                                    # css             # xml             # 识别php     # 图片
        gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;
                 # text                   # 早期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体
        gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启       
    }

2、webpack配置

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
    plugins: [
      //使用gzip打包
      new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      })
    ],
}

3、Nodejs配置

以express框架为例如何启用gzip：

npm install compression 
npm install @types/compression --save-dev

import compression from 'compression';
...
const app = express();
// 尽量在其他中间件前面
app.use(compression({level: 5}));
...

效果如下：