Vue加载优化,速度提高一倍。
前言 之前做的一个Vue项目,流程大概是这这样的:从公众号进入,由外系统获取用户的openid等信息,然后再跳转到项目首页进行加载初始化操作。 业务最近反应进入首页很慢,于是大致排查了下,由于外系统需要去微信获取用户授权,用户的的openid,调用定位接口获取位置等信息,想着会不会是他们的问题,经过沟通,他们也是按照微信的接口文档进行操作,没有什么优化的空间,于是想着能不能提高我们首页的加载速度,百度一番,果然有相应的优化方法, 主要有以下几个方法: 打包的时候不生成 「.map」 文件。 打包的时候生成 gzip 文件,部署的时候,让 「nginx」 直接读取 gzip 文件。 路由加载的时候采用 「懒加载模式」 。 首页较大的图片适当的进行压缩。 三方库采用 「CDN」 的方式引入。 由于 「CDN」 的方式改动较多,所以这次优化没有采用该方法,而是采用了其他四种方法,在测试环境上进行测试加载速度提高了一倍,加载时间从4秒减少到2秒,在生产上网络较好应该要快些。下面来依次介绍下这几种方法的具体操作。 分析文件大小 在开始操作具体的优化方法之前,先来分析下哪些代码文件比较大,较大的文件可以进行压缩,使用 webpack-bundle-analyzer 来进行分析。 首先执行 「npm install cross-env --save-dev」 安装 cross-env 依赖。 在