webpack使用gzip 压缩文件 & 部署时服务端nginx 也开启压缩共前端javascriptcss

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

安装插件

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压缩 gzipon; #启用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/，表示直接加载的文件并没有压缩