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

productionGzip: true,//前台开启压缩，这个优化方式需要后台配合

脚手架中也已经提示，如果开启的话：npm install --save-dev compression-webpack-plugin

在config--index.js中开启，脚手架已经在build文件中帮你配置好了他的具体内容

vue-cli已经配置的内容 

后台如何配合，可以自行百度，很多，此处稍微提示一下，很多资料中，一位前辈踩过的坑，我也用到了，所以再提一下

#后台开启

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压缩

到此为止，正常的开启压缩的流程完毕，第一个项目中解决了我首页加载特别慢的大问题

但是。。。当我第二次用到这个压缩工具的时候，出现了问题，报错如下

ValidationError: Compression Plugin Invalid Options

options should NOT have additional properties

网上查了狠毒没有找到这个错误的原因，自己也是找了很多资料，确认设置没有问题的时候，无意中想到一句话，可能版本有问题，于是对比了我之前使用的版本，果然，对比出来了，原来用的是"compression-webpack-plugin": "^1.1.11",现在是"compression-webpack-plugin": "^2.0.0",然后我就把json文件中的版本换掉重新安装一次，终于成功了

现在上一个压缩前后对比图

因为我这个项目比较小，同时也用了其他优化方式，比如路由懒加载，很多共用的地方都提成了组件，如果你的项目比较大就可以体会到差距，app.js会得到很大的优化