基于Vue的SPA如何优化页面加载速度
常见的几种SPA优化方式
减小入口文件体积
静态资源本地缓存
开启GZip压缩
使用SSR
.....
减小入口文件体积,常用的手段是路由懒加载,开启路由懒加载之后,待请求的页面会单独打包js文件,使得入口文件index.js变小,开启懒加载之后,js是这样请求加载的:
2. 静态文件本地缓存有两种方式
HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头,很多文章讲的比较详细,推荐:https://www.cnblogs.com/chinajava/p/5705169.html
Service Worker离线缓存,缺点:需要在HTTPS站点下,推荐:http://lzw.me/a/pwa-service-worker.html
而开启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之前!
最新文章
- Xamarin中使用DatePickerDialog的相关问题
- webgl巧妙方式写着色器代码
- Android动态方式破解apk终极篇(加固apk破解方式)
- 重写类的Equals以及重写Linq下的Distinct方法
- 找到SQL Server数据库历史增长信息
- .NET Nancy 详解(一) 初识
- 遇到的check the manual that corresponds to your MySQL server version for the right syntax错误
- hive笔记(自学整理的)
- ubuntu下配置java环境【转】
- hdu 2999 Stone Game, Why are you always there? 博弈论
- Bootstrap 源码解析(转)
- HDU--1212大数取模
- arcgis api 3.x for js 入门开发系列十四最近设施点路径分析(附源码下载)
- soa 和微服务的区别
- Django--cookie 和 session
- Spark On Yarn报警告信息 WARN yarn.Client: Neither spark.yarn.jars nor spark.yarn.archive is set, falling back to uploading libraries under SPARK_HOME.
- XamlWriter-将对象树写入Xaml
- Java Web 项目简单配置 Spring MVC进行访问
- Revit API画垂直于风管的风管
- warning LNK4099: PDB 'vc100.pdb' was not found... 解决方案
热门文章
- 用java实现删除文件夹里的所有文件
- log4net 基础
- .Net程序员学习Linux最简单的方法(转载)
- python的变量命名及其使用
- java并发编程,通过Future取消任务
- 用IDEA创建一个SpringBoot项目
- React API
- 【ArcGIS】文件地理数据库,个人地理数据库与ArcSDE的局别
- 【起航计划 025】2015 起航计划 Android APIDemo的魔鬼步伐 24 App->;Notification->;Notifying Service Controller service中使用Notification
- 如何让MVC和多层架构和谐并存(二)