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
}      

參考資料