问题描述本文以vue为例，记录一下，使用webpack插件compression-webpack-插件开启gzip压缩步骤，并对比开启gzip压缩前后所需时间，得出结论：**这个插件确实可以优化性能，减少加载时间**react也是如此，前端配置的vue.config.js配置这里就不赘述了。步骤，下载compression-webpack-plugincnpmicompression-webpack-plugin@6.1.1--save注意这里不能直接下载，需要下载低版本。直接下载就是最新版本。vue脚手架暂时不支持最新版本，所以会报错：TypeError:Cannotreadproperty'tapPromise'ofundefined。我这里的下载是指定@6.1.1版本，这是第二步就可以用了。vue.config.js使用了如下代码，直接复制粘贴即可。constCompressionPlugin=require('compression-webpack-plugin');//引入gzip压缩插件//暴露配置项，这些配置项将合并到webpackmodule.exports={chainWebpack(config){//......},configureWebpack:config=>{//开发环境不配置if(process.env.NODE_ENV!=='production')return//只配置生产环境return{plugins:[newCompressionPlugin({//这个插件不能使用太高的版本，否则会报错：TypeError:Cannotreadproperty'tapPromise'ofundefined//filename:"[path][base].gz",//这个方法是默认的，多个文件可以用多个.gz文件压缩，推荐使用如下写法推荐使用algorithm:'gzip',//官方默认的压缩算法也是gziptest:/\.js$|\.css$|\。html$|\.ttf$|\.eot$|\.woff$/,//使用正则表达式压缩匹配的文件，这里是针对html、css、js和字体（.ttf和.woff和.eot）docompressionthreshold:10240,//压缩超过这个字节大小的文件，使用默认值10240minRatio:0.8,//最小压缩比，官方默认为0.8//是否删除原来的静态资源文件，即只保留压缩后的.gz文件，建议设置为false，保留sourcefileincase://如果出现访问.gz文件无法访问时，也可以访问双重保护的源文件deleteOriginalAssets:false})]}},};这里配置后，暂时不能使用，需要在后台进行配置。这里，后端以nginx为例进行后端配置。nginx配置下面的代码可以直接复制粘贴。服务器{听80;服务器名称本地主机；location/{try_files$uri$uri//index.html;根C:/nginx-1.18.0/html/gzip/dist；indexindex.htmlindex.htm;}location/api/{proxy_passhttp://localhost:6666/;}#主要是下面的gizp配置，直接复制粘贴即可使用，亲测有效gzipon;#开启gzip压缩gzip_min_length4k;#小于4k的文件不压缩，大于4k的文件压缩gzip_buffers168k;#处理请求压缩的buffer个数和大小，如8k为单位申请16倍内存空间；使用默认，无需修改gzip_http_version1.1；#早期版本http不支持，指定默认兼容，无需修改gzip_comp_level2；#gzip压缩级别，1-9，理论上数字越大压缩效果越好，但也会消耗更多的CPU时间。其实再压缩2个以上也只能压缩一点点，但是cpu确实有点浪费。因为2个就够了#压缩文件类型MIME类型，百度很多#css#xml#识别php#图片gzip_typestext/plainapplication/x-javascriptapplication/javascripttext/javascripttext/cssapplication/xmlapplication/x-httpd-php图像/jpeg图像/gif图像/png应用程序/vnd.ms-fontobject字体/x-woff字体/ttf；#text#Earlyjs#js#js的另一种写法#.eotfont#wofffont#ttffontgzip_varyon;#是否在http头中添加Vary:Accept-Encoding，一般建议开启；未启用gzip压缩，加载时间icon项目在未启用时不使用compression-webpack-plugin插件，我们发现时间可以上百毫秒，资源加载时间有点长的。如果没有开启，如下图开启：gzip压缩开启，加载时间显示gizp压缩多了一个.gz文件。注意，开启gzip压缩后，对应的压缩文件中会多出.gz文件，比如字体压缩文件夹中：当然其他js文件夹中也有.gz，css文件夹中也有.gz。这里就不一一截图了，看自己的dist文件夹。看。接下来我们看看开启gzip压缩后优化了多少。让我们看看最终的性能优化与上面没有gzip压缩的情况相比如何。确实，加载时间已经优化了很多。另外，从首屏加载来看，直观感受也更快。响应头有更多的Content-Encoding:gzip。另外，如果启用了gzip压缩，在http请求中，还可以看到响应头多了Content-Encoding:gzip。如果未启用gzip压缩，则情况并非如此。如下图：综上所述，好记性不如烂笔头，记录一下，如果对你有帮助，点个赞吧^_^
