问题
vue cli2,打包完后比较大，每次访问都要请求的静态文件都要等好久，需要优化下静态文件等大小。
解决思路
vuecli 2.x自带了分析工具, 分析工具：webpack-bundle-analyzer(请自行搜索如何安装)
只要运行 npm run build --report
给出的结果如下图
stat：
这是文件的“输入”大小，在任何转换（如缩小）之前。
它被称为“stat-size”，因为它是从Webpack的stats对象获得的。
stat.png
parsed：
这是文件的“输出”大小。如果您使用的是像uglify这样的Webpack插件，那么这个值将反映代码的小型化。
parsed.png
gzipped：
这是通过gzip压缩运行解析的包/模块的大小。
gzipped.png
由此可见，gzip 压缩后的包最小，前提是浏览器支持gzip
gzip.png
服务器是nginx,没有用过配置压缩项，网上找了下，配置如下
屏幕快照 2019-12-13 下午2.12.23.png
配置完成后，重启niginx,清除浏览器缓存再次访问，发现并没有gzip压缩后的文件
屏幕快照 .png
再查看nginx配置gzip 发现有static静态压缩，才会访问gzip文件，描述如下：
Nginx的动态压缩是对每个请求先压缩再输出，这样造成虚拟机浪费了很多cpu，解决这个问题可以利用nginx模块Gzip Precompression，这个模块的作用是对于需要压缩的文件，直接读取已经压缩好的文件(文件名为加.gz)，而不是动态压缩，对于不支持gzip的请求则读取原文件。
gzip_static on;
a) 文件可以使用 gzip 命令来进行压缩，或任何其他兼容的命令。建议压缩文件和原始文件的修改日期和时间保持一致。
b) gzip_static配置优先级高于gzip。
c) 开启nginx_static后，对于任何文件都会先查找是否有对应的gz文件。
d) gzip_types设置对gzip_static无效。
到此nginx配置完成，现在需要生成gz文件，需要用到compression-webpack-plugin这个gem,配置完成后，在打包。
静态文件.png
结果
到现在前端静态文件也已经打包好，nginx也配置好了，清空浏览器缓存，再次访问，请求结果如下
请求大小.png)
请求大小1.png
可以看到传输的是压缩后的gz文件，有2m变到600多k，对于支持gz的浏览器，传输量变成了原来的1/3
参考文章：
Nginx gzip static静态压缩
compression-webpack-plugin Gzip压缩
网友评论