vue中gif加载一次_Vue加载优化，速度提高一倍。

本文首发于个人公众号【Java技术大杂烩】，欢迎关注。

前言

之前做的一个Vue项目，流程大概这这样的：从公众号进入，由外系统获取用户的openid等信息，然后再跳转到项目首页进行加载初始化操作。

业务最近反应进入首页很慢，于是大致排查了下，由于外系统需要去微信获取用户授权，用户的的openid，调用定位接口获取位置等信息，想着会不会是他们的问题，经过沟通，他们也是按照微信的接口文档进行操作，没有什么优化的空间，于是想着能不能提高我们首页的加载速度，百度一番，果然有相应的优化方法，

主要有以下几个方法：打包的时候不生成 「.map」 文件。

打包的时候生成 gzip 文件，部署的时候，让 「nginx」直接读取 gzip 文件。

路由加载的时候采用「懒加载模式」。

首页较大的图片适当的进行压缩。

三方库采用「CDN」的方式引入。

由于「CDN」的方式改动较多，所以这次优化没有采用该方法，而是采用了其他四种方法，在测试环境上进行测试加载速度提高了一倍，加载时间从4秒减少到2秒，在生产上网络较好应该要快些。下面来依次介绍下这几种方法的具体操作。

分析文件大小

在开始操作具体的优化方法之前，先来分析下哪些代码文件比较大，较大的文件可以进行压缩，使用 webpack-bundle-analyzer 来进行分析。首先先执行 「npm install cross-env --save-dev」 安装 cross-env 依赖。

在 package.json 文件的 scripts 下面加上:

&