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

常见的几种SPA优化方式

• 减少入口文件体积

• 静态资源本地缓存

• 开启GZip压缩

• 使用SSR

.....

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

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

• HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头，不少文章讲的比较详细，推荐：www.cnblogs.com/chinajava/p…

• Service Worker离线缓存，缺点：须要在HTTPS站点下，推荐：lzw.me/a/pwa-servi…

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

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

以上方法的实现思路：

图意：每一个页面（Page）中都会有不少个Vue组件，能够在Vue组件中添加自定义属性fetchData，fetchData里面能够执行异步请求（图中执行Vuex的Action），可是咱们怎么获取到全部组件的fetchData方法并执行呢？如图所示，在router.beforeResolve守卫中，咱们看看router.beforeResolve的定义，全部组件内守卫和异步路由组件被解析以后，解析守卫就被调用，意思是即便页面中有异步组件，它会等待异步组件解析以后执行，而且解析守卫在beforeEnter以前执行。那咱们怎么在解析守卫中获取到待加载页面的全部组件呢？经过router.getMatchedComponents方法。

完整实例：

这样咱们就能够在解析守卫中获取到全部待加载组件的fetchData方法并执行，这样无疑会在组件开始渲染以后获取到全部数据，提升页面加载速度。

不少人可能有个疑问，若是异步请求放在beforeCreate和created不是同样吗？答案是否认的，由于这种方式能够将异步请求放到beforeCreate以前！