本文主要介绍了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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。