vue cli 加载速度优化

问题

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