vue-cli开启压缩后踩过的坑

前言：

更新 vue-cli3.X,webpack4+压缩代码配置

1.npm i -D compression-webpack-plugin

2.vue.config.js

// 导入compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')

链接地址:https://www.webpackjs.com/plugins/compression-webpack-plugin/

怎么看是否压缩了,打包出来的dist文件夹中会出现,因为设置的是超过10240才会被压缩.所以不是所有问价会被压缩,这时候后台整个dist给后台.

还有在打包后的network

前端是否是设置成功

以上是看前端设置,还有一个看network请求头是不是gzip的

看后台服务器有没有设置 成功,就是在响应头中看..

#后台开启

gzip  on;# 启用 gzip 压缩功能

gzip_http_version 1.1; # 默认值是1.1，就是说对HTTP/1.1协议的请求才会进行gzip压缩

gzip_vary on;

gzip_comp_level 6; # 压缩级别，1压缩比最小处理速度最快，9压缩比最大但处理最慢，同时也最消耗CPU,一般设置为3就可以了

gzip_proxied any;# nginx 做前端代理时启用该选项，表示无论后端服务器的headers头返回什么信息，都无条件启用压缩

gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/jpeg image/gif image/png  application/javascript;application/javascript------必写   text/plain text/css application/x-javascript application/javascript application/xml;  # 什么类型的页面或文档启用压缩

 gzip_min_length  1024;# 最小压缩的页面，如果页面过于小，可能会越压越大，这里规定大于1K的页面才启用压缩

gzip_buffers 16 8k;# 设置系统获取几个单位的缓存用于存储gzip的压缩结果数据流

gzip_disable "MSIE [1-6].(?!.*SV1)";# 禁用IE6的gzip压缩