Nginx网页压缩传输

网页压缩传输是：服务器将资源压缩后传输到浏览器，浏览器进行解压显示。本篇文章将介绍vue项目在Nginx环境中如何开启。

nginx配置

    gzip                        on;
    gzip_static              on;
    gzip_min_length    1k;
    gzip_buffers           4 16k;
    gzip_http_version  1.1;
    gzip_comp_level    4;
    gzip_types             text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
    gzip_vary               on;
    gzip_proxied          expired no-cache no-store private auth;
    gzip_disable          "MSIE [1-6]\.";

1、gzip：是否开启压缩

2、gzip_static：首先尝试使用静态压缩，如果有则返回 .gz 的预压缩文件，否则尝试动态压缩。<span style="color: #f00;">(开启：如果有.gz文件，服务器直接传输.gz文件，否则压缩后再传输)</span>

3、gzip_min_length：用于设置当响应内容大于1KB时进行压缩输出，且一般建议最小值设置为1KB，当小于1KB时，可能会出现越压越大的问题。

4、gzip_buffers：表示按照原始数据大小以16KB为单位的4倍申请内存；如果没有设置，默认值是申请与原始数据相同大小的内存空间去存储gzip压缩结果。

5、gzip_comp_level：表示压缩级别为4，由于压缩级别越高，则需要压缩的时间越长，CPU消耗也越大。因此，一般推荐将压缩级别设置为4。

6、gzip_disable：用于设置浏览器为IE6时，不进行压缩，防止出现页面假死的现象。

7、gzip_types：定义压缩文件的类型，可以使用“*”代表所有。要配置单个可以按F12进行查看

8、gzip_http_version：表示只有是HTTP/1.1协议的请求时才会进行gzip压缩。现在大多数都是1.1协议了

9、gzip_proxied：用于设置Nginx作为反向代理服务器时，无条件压缩所有结果数据

10、gzip_vary：gzip_vary指令设置为on，表示在响应消息头中添加Vary: Accept-Encoding，使代理服务器根据请求头中的AcceptEncoding识别是否启用Gzip压缩。

其中，Nginx作为反向dialing时，gzip_proxied指令的常用参数值如下表：

any：无条件压缩所有响应数据
off：关闭方向代理的压缩
expired：如果响应信息头包含expired，启用压缩
no-cache：如果响应信息头包含cache-control:no-cache,启用压缩
no-store：如果响应信息头包含cache-control:no-store,启用压缩
private：如果响应信息头包含cache-control:private,启用压缩
no_last_modified：如果响应信息头包含last_modified,启用压缩
no_etag：如果响应信息头包含etag,启用压缩
auth：如果响应信息头包含authorization,启用压缩

vue配置压缩

安装compression-webpack-plugin。
npm install --save-dev compression-webpack-plugin@5.0.2
然后再vue.config.js加入：

// 引入文件压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'

module.exports = {
    if (isProduction) {
        //gzip压缩
        const productionGzipExtensions = ['html', 'js', 'css']
        config.plugins.push(
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp(
                    '\\.(' + productionGzipExtensions.join('|') + ')$'
                ),
                threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                deleteOriginalAssets: false // 删除原文件
            })
        )
    }
}