vue-cli 开启gzip提高首页加载速度

最近在做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文件
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。