懶載入也叫延遲載入，即在需要的時候進行載入、隨用隨載。
為什麼需要懶載入？像vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時簡單的說就是：進入首頁不用一次載入過多資源造成用時過長！！！

元件懶載入
比如我有個test元件，裡邊內容頗多，我按照正常非懶載入引入

<template>
    <div class="wrapp">
        學生id: {{$route.query.id}}
        
 
<test/>
    </div>
</template>
<script>
    //test為測試元件
    import test from '../../components/test.vue'
    export default {
        name: "dtl",
        components:{
            test:test
        }
    }
</script>

可以看到首屏從載入到渲染完畢總耗時899ms，其中核心檔案app.js載入耗時22s

然後我們懶載入，首屏載入渲染總耗時759ms，其中app.js耗時14ms

<template>
    <div class="wrapp">
        學生id: {{$route.query.id}}
        <test/>
    </div>
</template>
<script>
    export default {
        name: "dtl",
        components:{
            //test為測試元件
            test:()=> import ('../../components/test.vue')
        }
    }
 
</script>