问题形容

本文以vue为例,记录一下,应用webpack插件compression-webpack-plugin开启gzip压缩的步骤流程,以及比照开启gzip压缩前后所须要的工夫,得出结论:**这个插件确实可能做性能优化,缩小加载的工夫**react也是同一个情理,在此不赘述

前端配置之vue.config.js配置

第一步,下载compression-webpack-plugin

cnpm i compression-webpack-plugin@6.1.1 --save

留神,这里不能间接下载,须要下载低版本的。间接下载就是最新版的了,vue脚手架临时不反对最新版的,所以就会报错:TypeError: Cannot read property 'tapPromise' of undefined。我这里下载是指定@6.1.1版本,是能够用的

第二步,vue.config.js应用

下方代码,间接复制粘贴应用即可

const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件// 裸露配置项,会被合并到webpack中去module.exports = {    chainWebpack(config) {        // ......    },    configureWebpack: config => {        // 开发环境不配置        if (process.env.NODE_ENV !== 'production') return        // 生产环境才去配置        return {            plugins: [                new CompressionPlugin({ //此插件不能应用太高的版本,否则报错:TypeError: Cannot read property 'tapPromise' of undefined                    // filename: "[path][base].gz", // 这种形式是默认的,多个文件压缩就有多个.gz文件,倡议应用下方的写法                    filename: '[path].gz[query]', //  使得多个.gz文件合并成一个文件,这种形式压缩后的文件少,倡议应用                    algorithm: 'gzip', // 官网默认压缩算法也是gzip                    test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 应用正则给匹配到的文件做压缩,这里是给html、css、js以及字体(.ttf和.woff和.eot)做压缩                    threshold: 10240, //以字节为单位压缩超过此大小的文件,应用默认值10240吧                    minRatio: 0.8, // 最小压缩比率,官网默认0.8                    //是否删除原有动态资源文件,即只保留压缩后的.gz文件,倡议这个置为false,还保留源文件。以防:                    // 如果呈现拜访.gz文件拜访不到的时候,还能够拜访源文件双重保障                    deleteOriginalAssets: false                })            ]        }    },};
这里配置完当前,临时还不能应用,还须要后端做一下配置,这里后端以nginx为例

后端配置之nginx配置

下方代码,间接复制粘贴应用即可

    server {        listen       80;        server_name  localhost;        location / {            try_files $uri $uri/ /index.html;            root C:/nginx-1.18.0/html/gzip/dist;            index  index.html index.htm;        }        location /api/ {            proxy_pass http://localhost:6666/;        }                # 次要是下方的gizp配置哦,间接复制粘贴就能够应用啦,亲测无效哦        gzip on; # 开启gzip压缩        gzip_min_length 4k; # 小于4k的文件不会被压缩,大于4k的文件才会去压缩        gzip_buffers 16 8k; # 解决申请压缩的缓冲区数量和大小,比方8k为单位申请16倍内存空间;应用默认即可,不必批改        gzip_http_version 1.1; # 晚期版本http不反对,指定默认兼容,不必批改        gzip_comp_level 2; # gzip 压缩级别,1-9,实践上数字越大压缩的越好,也越占用CPU工夫。实际上超过2的再压缩,只能压缩一点点了,然而cpu确是有点节约。因为2就够用了                 # 压缩的文件类型 MIME类型,百度一下,一大把                                    # css             # xml             # 辨认php     # 图片        gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf;                 # text                   # 晚期js                 # js        # js的另一种写法                                                                                 # .eot字体                   # woff字体  # ttf字体        gzip_vary on; # 是否在http header中增加Vary: Accept-Encoding,个别状况下倡议开启           }

未开启gzip压缩,加载工夫图示

我的项目没有应用compression-webpack-plugin插件没开启的时候,咱们发现工夫能有好几百毫秒,加载资源工夫是有点长了,未开启如下图:

开启gzip压缩,加载工夫图示

gizp压缩多了一个.gz文件

留神开启gzip压缩当前,对应压缩文件中就会多了.gz的文件,比方字体压缩文件夹中:

当然别的js文件夹中也有.gz css文件夹中也有.gz 这里就不一一截图了,大家看本人的dist文件夹就能够看到了。接下来看开启了gzip压缩当前,到底优化了多少

看看最终性能优化如何

比照上方未开启gzip压缩当前,确实加载工夫优化了不少。另外,从首屏加载而言,直观感触,也是快了一些。

响应头多了Content-Encoding: gzip

另外,如果开启gzip压缩,在http申请中,也能够看到响应头多了Content-Encoding: gzip,没开启gzip压缩是没这个的。如下图:

总结

好忘性不如烂笔头,记录一下吧,如果帮到了您给个赞呗 ^_^