问题
vue cli2,打包完后比较大,每次访问都要请求的静态文件都要等好久,需要优化下静态文件等大小。
解决思路
vuecli 2.x自带了分析工具, 分析工具:webpack-bundle-analyzer(请自行搜索如何安装)
只要运行 npm run build --report
给出的结果如下图
stat:
这是文件的“输入”大小,在任何转换(如缩小)之前。
它被称为“stat-size”,因为它是从Webpack的stats对象获得的。
parsed:
这是文件的“输出”大小。如果您使用的是像uglify这样的Webpack插件,那么这个值将反映代码的小型化。
gzipped:
这是通过gzip压缩运行解析的包/模块的大小。
服务器是nginx,没有用过配置压缩项,网上找了下,配置如下
再查看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,配置完成后,在打包。
结果
到现在前端静态文件也已经打包好,nginx也配置好了,清空浏览器缓存,再次访问,请求结果如下
可以看到传输的是压缩后的gz文件,有2m变到600多k,对于支持gz的浏览器,传输量变成了原来的1/3
参考文章:
Nginx gzip static静态压缩
compression-webpack-plugin Gzip压缩