基于Vue的SPA如何优化页面加载速度

  1. 云栖社区>
  2. 前端那些事儿>
  3. 博客>
  4. 正文

基于Vue的SPA如何优化页面加载速度

我是小助手 2018-06-22 15:20:00 浏览829
展开阅读全文

常见的几种SPA优化方式

  • 减小入口文件体积

  • 静态资源本地缓存

  • 开启GZip压缩

  • 使用SSR

.....

  1. 减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的:

7e56418eeb722b66210533aadfc0f06682fc3880


2. 静态文件本地缓存有两种方式

而开启GZip压缩和使用SSR原理都比较简单,我们很容易想到这两种方式是如何提高页面加载速度的。

但是除了上面几种方式,另外一种优化方案也不容小觑,这也是我在近期项目开发中使用并理解到的。我们先说说通常项目中是如何加载页面数据:Vue组件生命周期中请求异步接口,在mounted之前应该都可以,据我了解绝大部分同学是在mounted的时候执行异步请求。但是我们可以把页面需要的请求放到Vue-Router的守卫中执行,意思是在路由beforeEnter之前就可以请求待加载页面中所有组件需要的数据,此时待加载页面的Vue组件还没开始渲染,而Vue组件开始渲染的时候我们就可以用Vuex里面的数据了。

以上方法的实现思路:


0a747a0d6610536a00884e34c2de97d8a8a602f4
图意:每个页面(Page)中都会有很多个Vue组件,可以在Vue组件中添加自定义属性fetchData,fetchData里面可以执行异步请求(图中执行Vuex的Action),但是我们怎么获取到所有组件的fetchData方法并执行呢?如图所示,在router.beforeResolve守卫中,我们看看router.beforeResolve的定义,所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用,意思是即使页面中有异步组件,它会等待异步组件解析之后执行,并且解析守卫在beforeEnter之前执行。那我们怎么在解析守卫中获取到待加载页面的所有组件呢?通过router.getMatchedComponents方法。
17524185113f0c5fefd203b064099d791693fa37
完整实例:

abdcaf32444d6fcb8871395da1b8b8a36dd0967d

这样我们就可以在解析守卫中获取到所有待加载组件的fetchData方法并执行,这样无疑会在组件开始渲染之后获取到所有数据,提高页面加载速度。

很多人可能有个疑问,如果异步请求放在beforeCreate和created不是一样吗?答案是否定的,因为这种方式可以将异步请求放到beforeCreate之前!



原文发布时间为:2018年06月10日
原文作者:吴空
本文来源: 掘金 如需转载请联系原作者


网友评论

登录后评论
0/500
评论
我是小助手
+ 关注
所属云栖号: 前端那些事儿