路由的懒加载

官方给出的解释:

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

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

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

我的解释:

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

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

路由的懒加载做了什么?

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

正常直接打包:
路由的懒加载
app这个文件里面就是我们写的代码。

用懒加载后的打包文件;
路由的懒加载
打包前代码:
路由的懒加载
打包后代码
路由的懒加载