vue-router【详解】路由懒加载

目录

​​路由懒加载的定义​​

​​路由懒加载的使用场景​​

​​路由懒加载的实现​​

​​方式一：【推荐】 使用import​​

​​方式二： 使用require​​

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

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

​​参考资料​​

路由懒加载的定义

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

路由懒加载的使用场景

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

路由懒加载的实现

原理：vue异步组件 

 

方式一：【推荐】 使用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#路由懒加载​​