你们知道吗？现在单页应用很火爆，但这时候，性能就显得特别重要！特别是大型项目，太多路由页面的话真的会卡到不行。所以说，VueRouter的一个小功能——懒加载，就能帮我们应对这个难题，选择性的加载组件，让网页快如闪电！接下来，就让我手把手教你怎么使用懒加载路由，保证你的项目流畅度飙升！
懒加载的原理
懒加载，就是让网站更快速地上传，还省电！那些像VueRouter和Webpack这些厉害神器，轻易就能做好代码的拼接。想看哪些懒加载的网页？先小小地问一下要找的组件，然后立马就显现出来了。
实践经验
1.按路由拆分组件
首先，别忘了把你的小部件分门别类变成小块儿，这样无论你的项目有多大都不用担心卡机问题了。接下来，你可以试下用Vue Router和Webpack这两款工具里的代码分割功能。只需要在路由设置时指定一个Promise函数，然后导入它就可以自动加载动态内容！
2.按需加载组件
想偷会儿懒？试试vue里的异步组件呗！能帮你变出一个生成Promise的工具，搞定就有组件实例。这么做，就是让组件等网页渲染完再说，网页速度哗哗地飙升~
3.示例代码
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const Home = () => import('@/views/Home.vue')
const About = () => import('@/views/About.vue')
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
export default router
就这么神奇！这段代码里的Home和About两个小模块，就像是会跳跃的小精灵，只要轻轻一点就能瞬间出现了！而且还有一个叫AsyncComponent的宝贝，它居然能够让我们的模板实现模块的异步加载，简直太赞了！
4.最佳实践
为了让项目跑得飞快，我们可以把功能拆分来做，像导航这种就可以独立出来处理。还要记得调整路径。另外，使用异步组件技术，只在用到时再加载，这样就能避免浪费资源了。装个VueRouter Lazy-loading，网页瞬间开启！
5.总结与展望
export default { components: { AsyncComponent: () => import('@/components/AsyncComponent.vue') } }
告诉你们，这儿有个超好用又简单的小妙招——用Vue Router的懒加载模式来提升网页加载速。这样既高效又省事儿，绝对不能错过！快动手试试看，好处可能比你想的更多
评论0