常见的几种SPA优化方式

  • 减小入口文件体积

  • 静态资源本地缓存

  • 开启GZip压缩

  • 使用SSR

.....

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

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

而开启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之前!

基于Vue的SPA如何优化页面加载速度的更多相关文章

  1. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  2. 转: web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  3. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  4. Web前端性能优化——提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  5. web页面加载速度缓慢,如何优化?

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  6. 【ASP.NET MVC】提高页面加载速度:脚本优化

    在这里我们说一下脚本优化的三个方法: 一.在我们做Web开发的时候,当我们引用Js文件的时候,我们一般会将js文件放在文档的head标签中,这时当页面加载的时候,浏览器会按着由上到下的顺序,当浏览器遇 ...

  7. 压缩代码加速ecshop程序页面加载速度

    由于页面有很多图片,页面加载速度有点慢,本来打算减小图片的体积,后来想想这个后期还得测试下,所以暂时不打算使用google的图片优化工具,先把ecshop生成的html代码压缩下吧 压缩前:首页体积为 ...

  8. nginx缓存静态资源,只需几个配置提升10倍页面加载速度

    nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求:   1.png 可以看到,静态资源占用了整个页面加载用时的90 ...

  9. jQuery实现图片预加载提高页面加载速度和用户体验

    我们在做网站的时候经常会遇到这样的问题:一个页面有大量的图片导致页面加载速度缓慢,经常会出现一个白页用户体验很不好.那么如何解决这个问题呢?首先我们会想到的是提高服务器性能,使用静态缓存等手段来加快图 ...

随机推荐

  1. Django 中orm的第一次举荐

    Django ORM :对象--关系--映射 创建Django准备工作: 1.在数据库创建你需要的数据库 2.在项目models里创建模型(就是python写的类,也可以说是python写的数据库) ...

  2. fileupload NPOI导入EXECL数据

    fileupload JS @section scripts{ <script src="~/Content/js/fileupload/vendor/jquery.ui.widget ...

  3. cmd/bat 判断日期,并删除文件

    代码来自互联网. ---------------------------------------- @echo off set a=2018-07-9 set ndate=%date:~,10%set ...

  4. iOS 时间戳和时间互换,计算两日期相隔天数

    /*  *获取当前系统时间的时间戳  */ +(NSInteger)getNowTimestamp;   /**  * 获取当前时间  */ + (NSString *)getNowTimeTampF ...

  5. springboot微信支付,支付二维码生成

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 微信扫码支付开发者文档,里面会有支付流程的教程 接口链接 URL地址:htt ...

  6. idea 插件描述(转)

    提供些idea插件的干货.干货.干货! 如何安装idea plug,方法如下图:如果安装不了考虑下是否代理问题: 1,maven helper 以前查看maven依赖都比较麻烦,需要用命令maven ...

  7. JS的函数参数传递为值传递

    function setAge(i) { alert(i);//24 i = 18; alert(i);//18,i的改变不会影响外面的age }; var age = 24; setAge(age) ...

  8. 内表转WORD

    组合HTML字符串的方法来导出WORD文件 DATA: BEGIN OF wa_html, zhtml(), END OF wa_html, gt_html LIKE TABLE OF wa_html ...

  9. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  10. AndroidStudio多AppId多渠道快速打包

    一直感觉AndroidStudio没有eclipse快,但是最近由于遇到一个问题不得不将工程迁移到AndroidStudio上,迁移后之前在eclipse上所做的所有批量打包又得重新在AndroidS ...