手摸手教你优化之gzip

gzip是否使用对比分析

是否使用gzip	打包文件大小	http请求js文件大小	实际需要的时间
否	13M	770kb	162ms
是	5.5M	206kB	49ms

1、客户端配置gzip

webpack配置gzip，客户端提前打包成.gz文件， 此操作选择配置(也可以不配置)

使用webpack插件配置gzip ，高版本会出错，安装5.0.1版本

npm i compression-webpack-plugin@5.0.1 -D

在vue.config.js内

//gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin');//引入compression-webpack-plugin
//匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i

module.exports = {
    configureWebpack: {
        plugins: [
            new CompressionWebpackPlugin({
                filename: "[path].gz[query]", //目标资源名称
                algorithm: "gzip",
                test: productionGzipExtensions, //处理所有匹配此 {RegExp} 的资源
                threshold: 10240,//只处理比这个值大的资源。按字节计算(设置10K以上进行压缩)
                minRatio: 0.8 //只有压缩率比这个值小的资源才会被处理
            })
    ]
    }
}

2、nginx配置gzip

http {
    # ----------------------------- gzip start -----------------------------
    #开启和关闭gzip模式
    gzip on;

    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length 1k;

    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 5;

    # 进行压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;

    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
    gzip_buffers 2 4k;

    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;
    # ----------------------------- gzip end  -----------------------------

}

注意点 gzip_static on;

此属性开启后，说白了就是会优先查找前端打包后的.gz文件。

先为ngxin安装gzip_static模块

• 缺少gzip_static问题参考

## 配置
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
## 重新安装
make && make install

最后重启nginx就生效了

./nginx -s reload

3、效果

4、题外话-Brotli

基于2021-7-5 1、淘宝、Jd官网都用的gzip

2、掘金使用了Brotli

• 使用 Brotli 压缩的 Javascript 文件比 gzip 小 14%。
• HTML 文件比 gzip 小 21%。
• CSS 文件比 gzip 小 17%。 参考-Brotli与gzip比较