Vue->如何實現路由懶加載

爲何要使用路由懶加載

在SPA但也應用開發過程當中，由於只有一個inde.html的關係，咱們第一次進入頁面就會在在一個vue的模塊app.js，而這個app.js裏面掛在這咱們所編寫的每一個頁面/組件/模塊，若是是這樣的話進入項目就會加載全部的資源，假設咱們的項目有幾十兆的資源，你以爲首次加載會不會白屏/卡頓/死機，那還用說嗎？
所以對SPA但也應用首屏渲染作出的性能優化方案是:路由懶加載

如何實現路由懶加載

路由配置文件中，在沒有使用路由懶加載以前，咱們的代碼是這樣的

//導入模塊
import recommend from 'views/recommend'

// 路由對象
{
    path: '/',
    name: 'recommend',
    component: recommend
},
複製代碼

使用箭頭函數實現路由懶加載

// 推薦

{
    path: '/recommend',
    name: 'recommend',
    meta: {title: '推薦',index: 1},
    component: () => import('views/recommend')
},
複製代碼

說明

• 資源懶加載，被訪問時纔會被加載對應的js模塊，而不是第一次加載全部資源
• 提升整個項目的加載性能
• 少寫一些import導入模塊的代碼，哈哈哈

寫在最後

但願個人分享對你有所幫助，更多資訊請持續關注，我會分享愈來愈多的實戰經驗哦！ 或加入大前端知識體系社區一塊兒探索技術:608229520