路由懒加载——vue路由(五)

定义

现实生活中让一个人一次等待1万秒,这个人肯定不干,但是1万次,一次等待一秒,这个人肯定能接受,后者的处理就是软件开发中的懒加载,也叫延迟加载。所谓路由加载有两种方式,一种是一次性将所有的路由全部加载(不管用不用),前面所有的示例都是这种加载方式。这种加载方式特点首次加载很慢,首次打开页面的时间很长。另一种方式叫懒加载,首次并不将所有的组件进行加载,当用到那个组件时加载那个组件,这样将加载时所需的时间分散到各个操作中,提高用户的体验。
在单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出现长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。

懒加载语法

懒加载使用也很方便,这里介绍使用vue异步加载组件和ES6 中的import进行懒加载两种方式

  1. vue异步加载组件所要做的就是在定义route时,使用懒加载语法,格式如下
  1. ES6 中的import加载

小结

延迟加载是某前最常用的提高用户体验的方法,路由懒加载方式详细内容参见
vue路由懒加载的几种方式

文章知识点与官方知识档案匹配,可进一步学习相关知识Vue入门技能树首页概览23399 人正在系统学习中

来源:guoyp2126

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2021年7月9日
下一篇 2021年7月9日

相关推荐