关于组件按需加载和路由懒加载

组件的按需加载:

exports default {
	name:"App",
	components:{
	/*
		可以理解为就是把我们的组件变成了一个函数,起初不执行它,
		只有你需要它的时候,也就是页面加载时,才触发它加载进来。路由同样如此
		1:首先,我们知道路由中通常会定义很多不同的页面。
		2:这个页面这项目build打包后,一般情况下,会放在一个单独的js文件中
		3:但是,如果很多的页面都放在同一个js文件中,必然会造成这个页面非常大
		4:如果我们一次性的从服务器中请求下来这个页面,可能会花费一定时间,用户体验不好
		如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
		像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大。
		造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验。
		Vue异步组件和webpack的require,ensure() 也可实现
		vue官方文档中使用的是import实现路由懒加载(webpack >2.4)
		所以推荐是使用import实现
		*/
		child: ()=> import "../component/child.vue"
	}
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值