1.交互流程

1. 浏览器发起http1.1 请求资源app.js, 并且告诉服务器支持gzip内容编码。

2. 服务端开始查找app.js 文件，找到文件。
3. 服务端判断是否打开gzip on，有则找当前路径下的app.js.gz返回，没有则自己生成一个临时的app.js.gz返回。

4. 浏览器接收到app.js.gz文件，并且根据gzip内容编码 进行解码，把app.js.gz还原为app.js进行加载。

2.知识点

服务端处理gzip有两个压缩的方式

1. 服务端实时压缩，缺点：占用资源。
2. 前端提前生成好 gz文件，服务器只需要匹配返回即可。优点：可以节省服务端压缩时候带来的压力。

3.配置

3.1.服务端配置

nginx 打开 gzip

gzip on;
gzip_static on;

3.2.客户端配置

vue-cli 配置CompressionWebpackPlugin

    const CompressionWebpackPlugin = require('compression-webpack-plugin');  
    //新增gzip压缩
    const productionGzipExtensions = ['js', 'css'];
    config.plugin('CompressionWebpackPlugin').use(CompressionWebpackPlugin, [
      {
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 匹配文件名
        threshold: 10240, // 对超过10K的数据进行压缩
        minRatio: 0.8, // 极小比
      }
    ]);

编译后生成结果