首页 > 程序开发 > 综合编程 > 其他综合 >

vue项目优化之页面的按需加载

2017-09-25

vue项目优化之页面的按需加载。vue+webpack实现页面的按需加载:通过vue写的单页应用时,可能会有很多的路由引入。就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间,降低用户的体验程度。懒加载

vue+webpack实现页面的按需加载

通过vue写的单页应用时,可能会有很多的路由引入。就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间,降低用户的体验程度。懒加载在很多的网站都有用到,比如淘宝、京东等等这样的购物网站,上面的图片链接等等都很多,如果你把滚轴迅速的往下拉的时候,你可能会看到图片加载的情况。

单页应用也是一样,用户可能没有通过点击跳转到其他的的页面,而是只在主页面进行了停留,那么我们就没有必要把其他页面的资源全部加载过来。如果用户点进去再加载。这样就可以大大提高请求时间,提高用户的体验程度。

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。

不进行页面按需加载引入方式:import home from '../../common/home.vue'

进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vue项目优化,还有通过减少向服务器请求的次数来减少等待的时间。比如,一个页面的数据包括图片、文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度。具体怎么使用,大家可以看我写的另外一个博客: vue项目优化之通过keep-alive数据缓存(vue+webpack)

相关文章
最新文章
热点推荐