目录

路由懒加载的定义

路由懒加载的使用场景

路由懒加载的实现

方式一：【推荐】 使用import

方式二： 使用require

方式三： 【不推荐，已过时】使用webpack提供的require.ensure()

 传统写法——未使用路由懒加载

参考资料

路由懒加载的定义

当路由被访问时才加载对应的组件，即路由懒加载。

路由懒加载的使用场景

未使用路由懒加载时，访问任一路由，都需要加载整个项目的所有js文件，会耗费大量的时间，严重影响页面加载速度，为了提升页面渲染性能（缩短页面加载时间）, 通常都建议使用路由懒加载。

路由懒加载的实现

原理：vue异步组件  https://blog.csdn.net/weixin_41192489/article/details/116610033

方式一：【推荐】 使用import

{path:'./about',name:'About',component:() => import('../views/Aboout.vue')
}

方式二： 使用require

{path:'./about',name:'About',component: resolve => require(['../views/Aboout.vue'], resolve),
}

方式三： 【不推荐，已过时】使用webpack提供的require.ensure()

{path:'./about',name:'About',component: r => require.ensure([], () => r(require('../views/Aboout.vue')), 'About')
}

 传统写法——未使用路由懒加载

仅供对比参考

import About from '../views/Aboout.vue'

{path:'./about',name:'About',component:About
}

参考资料

vue-router官网

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#路由懒加载