一、什麼是懶載入

在vue中元件懶載入又稱為程式碼分割，也叫延遲載入，即在需要的時候進行載入，隨用隨載。

二、為什麼要使用路由元件懶載入

像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時

簡單的說就是：進入首頁不用一次載入過多資源造成用時過長！！！

三、使用方式

（1）沒有使用路由懶載入

import MSite from '../pages/MSite/MSite.vue'
export default new VueRouter({
    routes:[
        {
            path:'/msite',
            component:MSite,
        },
    ]
})
 

（2）使用了路由懶載入

const MSite = () => import('../pages/MSite/MSite.vue')
export default new VueRouter({
    routes:[
        {
            path:'/msite',
            component:MSite,
        },
    ]
})

如上所示，只是將import MSite from '../pages/MSite/MSite.vue'改成const MSite = () => import('../pages/MSite/MSite.vue')即實現了路由懶載入的效果，原因很簡單：第二種方式返回路由元件的函式，只有執行此函式才會載入對應的元件。

也就是說，在執行入口js也就是main.js時，執行到const MSite = () => import('../pages/MSite/MSite.vue')時，僅僅是申明瞭你這個路由元件，而並沒有真正去請求它，當你點選相應路由連結時才會去請求它，並且，只有第一次點選才會去請求，後續不會再重複請求。