我来问你个问题，什么叫路由懒加载？简单来说就是，有时候我们打开很大很复杂的网站，那些乱七八糟的东西全都刷得眼花缭乱的，但有了这个技术，网站只会加载你正在查看或者点击的那部分，用起来就舒服多！比如说，你喜欢上网浏览新闻，看到某条信息想点进去看看，那么网站只会给你显示相关的一系列新闻，其他的内容都被巧妙地避开了，这样一来，你找自己感兴趣的新闻就容易多了！所以说，路由懒加载不仅仅可以帮你节省等待的时间，还能让整個网站变得运行更快。
为什么要使用路由懒加载？
为啥要用路由懒加载？简单来说，它能更快地显示网页大型文件。没有这招的话，你得等到网页上的图片都下完才能看东西，多费时多难受！可是有了它，首次载入快如闪电，一点开就是重点部分，真是方便又舒适。而且效果也是杠杠的，保证你的网站人气爆棚！
Vue Router中的路由懒加载是如何工作的？
搞定VueRouter懒加载超轻松~关键就看如何巧妙地借助动态加载组件这招儿。具体咋做？直接用上Vue自带的 `import()` 函数就可以。这个函数可帮你搞出一个Promise。等 Promise搞定了，组件就能闪亮登场！这样一来，组件就不用一次性全都加载进来，只在用到的时候才下载，节省内存还能加速网页速度，简直棒极了！
如何配置Vue Router以支持路由懒加载？
想让VueRouter懒加载变得容易？简单得很！只需要换种方式给路由设置。怎么弄？把’component’属性变成一个可以调用import()动态引进组件的函数。这样一改，只有进到那个路由时，组件才会加载，懒加载就是这么回事儿！来看看这个例子：
javascript
const routes = [
{
path: '/home',
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
组件是导入 Home.vue 视图的。
},
path: '/about',
用的都是这个组件，导入了‘关于’那个视图文件。
}
]
实际案例：一个简单的Vue Router懒加载示例
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: () => import('./views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
}
]
})
来试试这个超好玩的实验！大家都知道Vue网站里有两个页面，分别是主页和关于我们的页面？平时我们打开就是这两页。但有个叫“路由懒加载”的神奇技术，只需要点开某个文件夹或链接，对应的网页才能出来。这样做不仅网站速度快，而且使用起来超级方便！
路由懒加载的优点
懒加载真给力！第一个优点就是使页面加载得超快，第二，它可以帮我们减缓服务器压力，不用一下子全加载出来那么累，而且最重点的是它还提升了用户使用感受，不怕因为卡顿而心烦气躁了。
路由懒加载的局限性
懒加载是对付大型页面和繁琐功能的好帮手，可如果只是简简单单的网页，那还是算了，没啥效果。不过，用太多懒加载会让页面打开速度变慢，还有可能出现小小的载入圆圈，所以要把握个度，别太任性
如何优化路由懒加载的性能？
听说过路由器的“懒加载”吗？这个方法可以加快网页速度。再告诉你们个小妙招，Webpack可以把代码分成许多微小的部分，只加载它们所需要的部分，别一次性全都加载进去，这是不是挺节省时间的？还有就是“预加载”，提前加载用户可能要用到的资源，等真正要用时，这些资源早就加载好了，瞬间就能展示出来，速度和用户体验都是大大滴提高！
总结
跟你们说个秘密，VueRouter的懒加载确实很赞~不仅仅让网站变快，还提升了用户体验感。想加载啥再加载啥，服务器压力都小了好多。这个小技巧，是不是超实用？希望我这个小建议能帮到大家更好地掌握和利用这个技巧，让你们的网页像火箭一样快，流畅得不行！
评论0