vue-router路由懒加载的实现(解决vue项目首次加载慢)


Posted in Javascript onAugust 28, 2018

在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

也叫延迟加载,即在需要的时候进行加载,随用随载。

为什么需要懒加载?

像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时

简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!

如何实现?

懒加载写法:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

非懒加载的路由配置:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了

如下图:

vue-router路由懒加载的实现(解决vue项目首次加载慢)

 

找到build下面的webpack.prod.conf.js 添加 publicPath:"./",

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
Nov 24 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
Sep 13 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 #Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 #Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 #Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 #Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 #Javascript
对vux点击事件的优化详解
Aug 28 #Javascript
You might like
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php中session定期自动清理的方法
2015/11/12 PHP
JavaScript高级程序设计
2006/12/29 Javascript
jquery.tmpl JQuery模板插件
2011/10/10 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
jquery删除指定子元素代码实例
2015/01/13 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
Vue精简版风格概述
2018/01/30 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
python实现图片中文字分割效果
2019/07/22 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
python安装gdal的两种方法
2019/10/29 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
汇科协同Java笔试题
2012/03/31 面试题
红旗方阵解说词
2014/02/12 职场文书
养成教育经验材料
2014/05/26 职场文书
商场促销活动总结
2014/07/10 职场文书
招标授权委托书样本
2014/09/23 职场文书
介绍信模板
2015/01/31 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS