路由的懒加载

官方给出的解释:

打包构建应用时,javascript包会变得非常大,请求发送到服务器获取时一次性全部下载会影响页面加载。

那么如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就能提高效率了。

vue中路由的懒加载就实现了这个。

我的解释:

我们知道路由中通常会定义很多不同的页面;
这些页面一般情况下会被打包到一个js文件中;
但是,页面这么多放在一个js文件中,必然会造成这个页面非常大;
如果我们一次性从服务器请求下来这个页面,可能需要一些时间,甚至用户电脑上还会出现短暂的空白网页情况;

如何避免?vue中路由的懒加载可以避免。

路由的懒加载做了什么?

路由的懒加载的主要作用就是将路由对应的组件包打包成一个一个的js代码块;
只有在这个路由被访问到的时候,才加载对应的组件。

正常直接打包:
在这里插入图片描述
app这个文件里面就是我们写的代码。

用懒加载后的打包文件;
在这里插入图片描述
打包前代码:
在这里插入图片描述
打包后代码
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值