vue-cli 开启gzip提高首页加载速度
2020-05-10 本文已影响0人
专注_刻意练习
最近在做vue项目。利用了vue-cli自动创建了框架。但是发现build生成的项目比较大。首页加载时间过长。达到了9s左右。实在不能忍受。于是开始vue-cli的优化，以提高首页加载速度。看了网上很多文章，基本上都是来回复制，很少有原创文章，所以走了不少弯路，于是决定自己整理一下自己的优化经历。方便自己以后复习回顾。
这是未优化之前，直接build生成的项目，一共14.2M。
主文件vendor-async加载时间达到了恐怖的56s
第一步：关闭生成map文件。减少打包后的文件体积。
再次build构建，文件大小只有3.3M了
主文件vendor-async加载时间9s左右，显然不能接受，需要继续优化。
开启gzip压缩，需要按照提示安装插件。高版本可能会报错，我安装"^1.1.11"没有报错。
这里增加一行代码，删除源文件
再次build构建，文件大小只有1.2M了，已经比较令人满意了
发布项目，再次请求1.2s左右就加载出来首页了
完成全部加载2.83s，已经可以令人接受了。
备注一下遇到的问题：
开启gzip压缩以后构建的项目，上传的服务器，需要nginx增加一项配置，gzip_static on; #静态压缩。否则会出现无法加载.gz文件的问题。
请求数据失败，nginx未开启静态压缩配置。
增加打开静态压缩配置，然后重启Nginx就可以了。
成功请求到对应的.gz文件
