vue项目首页加载速度优化

凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉,如果各位有更好的方案,不吝赐教。

1: 针对第三方js库的优化

我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu。大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖慢。

针对这个问题我们的解决方案是,用文档的cdn文件代替,而不用打包到vender里面去。具体的做法是:

1: 在index.html里面引入依赖库js文件

 // index.html
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2: 去掉第三方js的import,因为在第一步已经通过script标签引用进来了。

3: 把第三方库的js文件从打包文件里去掉

这一步的做法就是利用webpack的externals。具体做法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals:

图片描述

2: 利用vue-router进行页面的懒加载(lazy load)

这里的页面的懒加载是指,假如我现在访问A页面,只会去请求A页面里的东西,其他页面的东西不会去请求。
具体怎么做,vue-router的官网都写得很清楚了,有需要的去看一下就懂了:
通过vue-router实现页面的懒加载

3: 图片资源的压缩
严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大,特别是对于移动端的项目来说。
对于非logo的图片文件,让UI设计师提供jpg格式的,不要用png.
对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:
https://tinypng.com/

成果总结:
通过以上的那些方案,再加上我们的代码本来就是部署在CDN上面的,我们在移动端(微信,QQ,浏览器等)基本都能达到秒开的效果。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值