初衷：第一次做前端vue 我的项目，会到很多问题很多坑， 保持记录总结，也能帮忙别人 少走弯路
问题形容：打包体积过大时， 晋升web传输性能，使浏览器不卡顿
目标： 前端对css/js 打包压缩， 后端nginx 也打包压缩， 这样节俭服务性能， 在浏览器传输时， 服务端没有找到.gz 文件才进行压缩，而不至于每次都压缩， 耗费性能
一： 前端webpack 打包 配置

  1. 装置插件
npm install compression-webpack-plugin@5.0.2 -D  (装置7.0.0版本的会报TypeError: Cannot read property ‘tapPromise‘ of undefined)

2.在vue.config.js 中配置

 configureWebpack: config => {      if (IS_PROD) {// 为生产环境批改配置...          config.plugins.push(new CompressionWebpackPlugin({          filename: "[path].gz[query]", //压缩后的文件名（放弃原文件名， 后缀加.gz）          algorithm: "gzip", //应用gzip压缩          test: productionGzipExtensions, //正则匹配文件名          threshold: 10*1024,//对超过10k的文件进行压缩          minRatio: 0.8 //压缩率小于0.8才会压缩        }))      }      },

3.执行 npm run build ,打包解决的文件如下： 在dist 下

二： 后端服务器ngnix打包配置
1.编辑nginx.conf

    #开启gzip压缩    gzip  on;    #启用gzip压缩的最小文件，小于设置值的文件将不会压缩    gzip_min_length 1K;    #gzip_buffers 4 16k;    gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU工夫, 个别都设置成两头值    gzip_comp_level 5;    #进行压缩的文件类型。javascript有多种形式。其中的值能够在 mime.types 文件中找到。    gzip_types text/plain application/json application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;    #是否在http header中增加Vary: Accept-Encoding，倡议开启    gzip_vary on;

2.重启nginx 后， 从新流量页面，再response header 中将会看到Content-Encoding: gzip， ETag: W/"6103c456-91874" 示意是服务端动静压缩加载的， 若没有后面的W/， 示意间接加载的文件并没有压缩

总结： 在前端打包时配置gzip 压缩，在nginx 服务也开启gzip压缩， 在浏览器加载时， 服务端若找不到压缩文件， 符合条件则进行动静压缩