前言:
更新 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压缩