GZIP——静态资源压缩

上一次，小白写的vue页面经打包部署到了服务器，不过白屏的等待太过分了。

白屏分析1.png
看了一下一次刷新的白屏分析，chunk-vendors.js就是这货的加载最耽误时间，想起了之前听过的GZIP压缩。

GZIP是啥

gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术。
服务端压缩文件-->网络传输-->客户端解压文件
web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器，Chrome,firefox,IE等都支持该协议。
gzip压缩大大节省服务器的网络带宽，但是并不是对所有文件进行压缩（例如，很多图片gzip压缩的收益就不明显），通常只是压缩静态文件。究其原因，gzip压缩是在一个文本文件中找出一些重复出现的字符串、临时替换它们，从而使整个文件变小。根据这个原理，文件中代码的重复率越高，那么压缩的效率就越高，使用 Gzip 的收益也就越大。反之亦然。

原理图.png

webpack进行GZIP压缩

cnpm i compression-webpack-plugin -D

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
 configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240, // 只处理比这个值大的资源。按字节计算
        minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理
      }))
    }
  }
};

compression-webpack-plugin配置文档

Koa2开启GZIP压缩

cnpm i koa-compress -S

const Koa = require('koa');
const app = new Koa();
const compress = require('koa-compress');

app.use(compress(options));

koa-compress配置文档

两种方案的关系

webpack只负责打包出静态文件，也就是直接产出.gz压缩后的文件。[速冻饺子]

koa的实现是当请求到达服务器，服务器压缩对应的文件给出响应（是会消耗运转中的服务器的CPU的），一般用于有专职前端服务器群的项目。[新鲜包的饺子]

---

开启GZIP后3.5s降到了1.5s，chunk-vendors.js这货也从800k降到了200k，看起来可以呦~

白屏分析2.png