vue-router懒加载速度缓慢问题及解决方法
作者:前端攻城小牛 发布时间:2024-04-27 16:07:23
标签:vue,router,懒加载
懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载。
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
懒加载的方式:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//采用了懒加载
export default new Router({
routes: [
{
path:'/',
component:resolve => require(['@/components/index'],resolve)
}
]
})
非懒加载的方式:
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'
Vue.use(Router)
export default new Router({
routes: [
{
path:'/',
component:index
}
]
})
下面看下vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: resolve => require(['components/Hello.vue'], resolve)
},
{
path: '/about',
component: resolve => require(['components/About.vue'], resolve)
}
]
})
总结
以上所述是小编给大家介绍的vue-router懒加载速度缓慢问题及解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
来源:https://www.jianshu.com/p/465ad68c2599
0
投稿
猜你喜欢
- 两个代码,一个是把python当微信操作,可以查看自己的好友信息,群信息等。还可以定时发送文本,文件等。效果就和你本人操作一样,没差别。还有
- OpenAI 是一个人工智能的工具包,包括神经网络、遗传算法和有限状态机等。使用python可以非常便捷的操作OpenAI的API。一下是O
- 和其他语言不一样,传递参数的时候,python不允许程序员选择采用传值还是传引用。Python参数传递采用的肯定是“传对象引用”的方式。实际
- 这个任务是自己在项目中数据处理的一部分内容,待处理的图片如下所示:我需要将目标区域给裁剪出来,要不然在后期训练网络的时候整幅图像过大,且目标
- 1.漏洞介绍在XHTML 1.0标准下,使用特殊构造的CSS样式,在Internet Explorer 7.0
- 在LintCode上练习遇到这个问题,查阅资料找到多种方法,总结如下。输入输出123321第一种:整数方法取余取整实现class Solut
- 这里提供在使用python进行开发中常使用到的方法技巧,如有不对欢迎批评指正。要点:开发中类、变量特性查询,类型就是类,断言的使用,深浅复制
- pyecharts产生背景Echarts是由百度开源的数据可视化,凭借良好的交互性和精巧的图表设计,得到众多开发者的认可,而python很适
- 处理下拉列表需要使用selenium中的工具类Select,常用方法如下:示例网站:http://sahitest.com/demo示例场景
- 本文以实例形式实现了python监控linux性能以及进程消耗性能的方法,具体实现代码如下:# -*- coding: utf-8 -*-&
- 如今WEB的安全问题影响着整个安全界,SQL注入,跨站脚本攻击等攻击受到了关注。 网络安全问题日益变的更加重要,国内依然有很多主机受到此类安
- 本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下话不多说,代码如下:首先是html的代码:<!
- 目录0 背景说明0.1 获取AccessToken0.2 数据库查询0.3 文件下载2. 简单的封装3. 简单测试4. 参考文档0 背景说明
- 对于使用Django框架开发的系统,当部署时设置settings.py文件中Debug=False时xadmin后台管理系统样式会丢失。【问
- 前面提到了银行转账这个场景,展示了一个比较耗时的转账操作。这篇继续转帐,下面展示一段程序,多个线程的操作都更改了amount变量导致运行结果
- 1. 首先安装node,推荐偶数版本;好了之后检查一下: node -v;出现版本好即为安装成功;win10家庭版本的msi版本的时候出现无
- Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流。16年10月Vue发布了2.x版本,经
- 在使用mysql运行某些语句时,会因数据量太大而导致死锁,没有反映。这个时候,就需要kill掉某个正在消耗资源的query语句即可,KILL
- 代码实例python-magic是libmagic文件类型识别库的python接口。 libmagic通过根据预定义的文件类型列表检查它们的
- 覆盖原型//囚犯示例 //1.定义原型对象 var proto = { sentence : 4, //监禁年限 probation: