之前有一个vue项目，首页加载莫名需要10s的时间。多次测试，发现是vendor包1.7M下载用了10s，而且已经是分离了17个js包后的大小。后来使用webpack-bundle-analyzer查看包的状态以及删减不需要的依赖一减小vendor的大小。减少到1M以下后，效果还是不及期望。后来就用了gzip压缩，后端配合gzip传输。那叫一个秒加载！（需要vue-cli2以上）

安装

npm install --save-dev compression-webpack-plugin

配置

在config/index.js中

// 打开Gzip
productionGzip: true，
// 设置要压缩的文件类型
productionGzipExtensions: ['js', 'css']

还有一个关键点

 "compression-webpack-plugin": "^2.0.0"

降版本

 "compression-webpack-plugin": "^1.1.11"

否则会报错

完成的例子

后缀都变为gz啦

首先vendor包大大减小，并且通过后端配置，传输速度可以提升10倍到100倍！！！（如果是起初没有打开gzip传输。ps这个会加重服务器的cpu使用）