,,vue-router路由懒加载及实现的3种方式

,,vue-router路由懒加载及实现的3种方式

本文主要介绍了vue-router路由的三种延迟加载方式及其实现。文章通过示例代码非常详细,对你的学习或者工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

什么是路由懒加载?

也称延迟加载,即需要时加载,按需加载。

官方解释:

1:打包构建应用时,JavaScript包会变得非常大,影响页面加载。

2.如果能把不同路由对应的组件分成不同的代码块,然后在访问路由时加载相应的组件,效率会更高。

官方说法是什么?为什么需要懒装?

1:首先我们知道,路由中通常会定义很多不同的页面。

2:在这个页面被构建和打包之后,它通常会被放在一个单独的js文件中。

3.但是,如果很多页面放在同一个js文件中,这个页面必然会非常大。

4.如果我们一次从服务器请求这个页面,可能需要一些时间,用户体验也不好。

5:如何避免这种情况发生?就用路由懒加载吧。

继续解释原由?

1.对于vue这样的单页应用,如果没有应用的懒加载,用webpack打包的文件会异常大。

2.进入首页需要加载的内容太多,时间太长,长时间出现白屏。即使做加载,也不利于用户体验。

3.通过使用懒加载,可以对页面进行划分,在需要的时候加载页面,可以有效分担首页所承受的加载压力,减少首页的加载时间。

也就是说,进入页面不需要一次加载太多资源,造成加载时间过程!

路由懒加载做了什么事情?

1.主要功能是将路由对应的组件打包成js代码块。

2:只有访问这个路由才会加载相应的组件,否则不会加载!

也就是只有当这个路由被访问时,才会加载相应的组件,否则,不会加载!

1:.如何实现路由懒加载??

vue项目中实现路由按需加载(路由懒加载)有三种方式:

1: vue异步组件

2: ES6标准语法导入()——推荐!

3.要求,确保()共3个:webpack

2.Vue异步加载技术

1.vue-Router配置路由,使用vue的异步组件技术,可以实现懒加载。这时,一个组件会生成一个js文件。

2:component:resolve=require([' put routing address to loaded '],resolve)

{

路径:“/problem”,

名称:“问题”,

组件:resolve=require(['./pages/home/problemList'],解决)

}

3.ES6推荐方式imprort ()----推荐使用

1.直接引入组件的方式,import是ES6的一个语法标准。如果需要浏览器兼容性,需要转换成es5语法。

2:推荐这种方法,但是要注意wepack的2.4版本。

3.在3:vue的官方文档中也使用了import来实现路由的懒加载。

4:上面声明进口,下面直接使用。

从“Vue”导入Vue;

从“vue-router”导入路由器;

//官网知道:下面没有指定webpackChunkName,每个组件打包成一个js文件。

const Foo=()=import('./components/Foo’)

const Aoo=()=import('./components/Aoo’)

//下面2行代码,指定了相同的webpackChunkName,将合并打包成一个js文件。

//const Foo=()=import(/* webpackChunkName:' ImportFuncDemo ' */'./components/Foo’)

//const Aoo=()=import(/* webpackChunkName:' ImportFuncDemo ' */'./components/Aoo’)

导出默认新路由器({

路线:[

{

路径:“/Foo”,

姓名:'福',

组件:Foo

},

{

路径:“/Aoo”,

名称:' Aoo ',

组件:Aoo

}

]

})

4.webpack提供的require.ensure()实现懒加载:

1: Vue-router配置路由,并要求确保webpack技术也可用于按需加载。

2:在这种情况下,具有相同chunkName的多个路由将被组合并打包到一个js文件中。

3.require.ensure可以按需加载资源,包括js、css等。他将把需要的文件单独打包,而不是和主文件一起打包。

4:第一个参数是一个数组,表示第二个参数中需要依赖的模块。这些会提前加载。

5:第二个是回调函数。在这个回调函数中,require文件将被单独打包成一个块,而不会与主文件打包在一起。因此,生成了两个块,第一次只加载主文件。

6:第三个参数是错误回调。

7:第四个参数是单独打包的块的文件名。

这里的代码指的是原文链接:https://blog.csdn.net/qq_41998083/article/details/109726402.

从“Vue”导入Vue;

从“vue-router”导入路由器;

const HelloWorld=resolve={

require . assure([' @/components/hello world '],()={

resolve(要求(' @/components/HelloWorld '))

})

}

Vue.use('路由器')

导出默认新路由器({

路线:[{

{路径:'。/',

名称:“HelloWorld”,

组件:HelloWorld

}

}]

})

4.import和require的比较(了解)

1:导入是一个解构过程,在编译时执行。

2: require是一个赋值过程,在运行时执行,即异步加载。

3.require的性能略低于import,因为require在运行时引入模块,同时也给变量赋值。

至此,已经介绍了VueRouter惰性加载的基本知识和使用方法。逻辑很简单,关键在于实践。感谢观看!

总结

这就是本文关于vue路由器路由的三种惰性加载和实现方式。关于vue-router路由的延迟加载的更多信息,请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: