webpack使用gzip压缩文件&部署时，服务端的nginx也开启了压缩功能。初衷：第一次做前端vue项目，会遇到很多问题和坑。坚持记录和总结，也能帮助别人少走弯路。问题描述：当包过大时，提高web传输性能，使浏览器不卡顿。gz文件是压缩的，不是每次都压缩，比较耗性能1：前端webpack打包配置安装插件npminstallcompression-webpack-plugin@5.0.2-D（安装7.0.0版本会报TypeError:Cannotreadproperty'tapPromise'ofundefined)2.在vue.config.js中配置configureWebpack:config=>{if(IS_PROD){//修改生产环境的配置...config.plugins.push(newCompressionWebpackPlugin({filename:"[path].gz[query]",//压缩文件名（保留原文件名，后缀加.gz）algorithm:"gzip",//使用gzip压缩test:productionGzipExtensions,//正则匹配filenamethreshold:10*1024,//Compressfilesover10kminRatio:0.8//压缩比小于0.8才压缩}))}},3.执行npmrunbuild，打包文件如下：dist下：后端服务器ngnix打包配置1.编辑nginx.conf#开启gzip压缩gzipon;#启用gzip压缩最小文件，小于设定值的文件不压缩gzip_min_length1K;#gzip_buffers416k;gzip压缩级别，1-9，数字字越大，压缩效果越好，占用的CPU时间也越多。一般设置为中间值。gzip_comp_level5；#压缩文件类型javascript有很多种形式。这些值可以在mime.types文件中找到。gzip_types文本/普通应用程序/json应用程序/javascript应用程序/x-javascript文本/css应用程序/xml文本/javascript应用程序/x-httpd-php图像/jpeg图像/gif图像/png应用程序/vnd.ms-fontobject字体/ttf字体/opentype字体/x-woff图像/svg+xml；#是否在http头中添加Vary:Accept-Encoding，建议开启gzip_varyon；2、重启nginx后，重流页面，然后会在响应头中看到Content-Encoding:gzip,ETag:W/"6103c456-91874"表示是服务器动态压缩加载的。如果前面没有W/，则表示直接加载的文件没有被压缩。总结：前端打包时配置gzip压缩。nginx服务还启用gzip压缩。浏览器加载时，如果服务器找不到压缩文件，如果满足条件，将进行动态压缩。
