前端性能优化《二》：开启gzip压缩

一、背景

在使用vue-cli3搭建项目的时候，当使用npm run build进行生产环境打包的时候会发现有以下显示：

我们可以看到Gzipped那一列，也就是编译生成后的每一个文件都会有对应的Gzipped文件，并且比原文件小了不止3倍，这无疑会大大节省服务器的网络带宽。那什么是gzip呢？

二、认识gzip

1、什么是gzip

gzip是GNUzip的缩写，最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术，web服务器和客户端（浏览器）必须共同支持gzip。目前主流的浏览器：Chrome、firefox、IE等都支持该协议。常见的服务器如Apache，Nginx，IIS同样支持gzip。

2、gzip工作原理

1)浏览器请求url，并在request header中设置属性accept-encoding：gzip，表明浏览器支持gzip。

2)服务器收到浏览器发送的请求之后，判断浏览器是否支持gzip，如果支持gzip，则向浏览器传送压缩过的内容，不支持则向浏览器发送未经压缩的内容。一般情况下，浏览器和服务器都支持gzip，response headers返回包含content-encoding:gzip。

3)浏览器接收到服务器的响应之后判断内容是否被压缩，如果被压缩则解压缩显示页面内容。

下面我们打开taobao查看一下示例（google）：

从上图的Content-Encoding那一列我们可以看到，前面三个文件都使用的是gzip文件。
下面再放一张网络图(我自己查看的时候Request Headers没有Accept-Encoding这一项emmm很尴尬)，可以更清晰。

3、哪些文件可以进行gzip压缩

gzip 可以压缩所有的文件，但是这不代表我们要对所有文件进行压缩，我们写的代码（css,js）之类的文件会有很好的压缩效果，但是图片之类文件则不会被 gzip 压缩太多，因为它们已经内置了一些压缩，一些文件（比如一些已经被压缩的像.zip文件那种）再去压缩可能会让生成的文件体积更大一些。当然已经很小的文件也没有去压缩的必要了。

三、如何配置

1、为什么前端要配置

看起来只需要服务端参与：当浏览器请求时，服务器实时压缩文件然后返回。那为什么还要前端去参与呢？
每次请求服务端都要压缩然后返回信息回来，会增加服务器开销，压缩等级越高越消耗cpu。我们在 Webpack打包时就直接生成高压缩等级的文件，作为静态资源放在服务器上，就会高效很多。

2、如何生成gzip文件

webpack中的compression-webpack-plugin就能帮我们完成这个事情。
简单配置如下：

// vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
	// ...
    configureWebpack: config => {
        const plugins = [];
        // 同externals一样，我们只想在生产环境下生成gzip即可
        if (process.env.NODE_ENV === 'production') {
            plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]', // 生成的文件名
                    algorithm: 'gzip', // 类型
                    test: new RegExp('\\.(js|css)$'), // 匹配规则
                    threshold: 10240, // 字节数 只处理比这个大的资源
                    minRatio: 0.8 // 压缩率 只有比这个小的才会处理
                })
            )
        }
        config.plugins = [
            ...config.plugins,
            ...plugins
        ]
    }
}

运行npm run build打包生成后，就可以发现生成了额外的.gz文件。

四、检测网站

如何去检测某个网站有没有开启gzip压缩，压缩比例是多少呢等等信息，这里提供一个快捷检查网站：站长工具

参考资料

真是要加油学习呢~
[1]: 探索HTTP传输中gzip压缩的秘密
[2]: 简明性能优化：双端开启Gzip指南
[3]: 你真的了解gzip吗？