五、配置非同步元件實現懶載入的問題分析

　　1、多次進出同一個非同步載入頁面是否會造成多次載入元件？

　　答：否，首次需要用到元件時瀏覽器會發送請求載入元件，載入完將會快取起來，以供之後再次用到該元件時呼叫

　　2、在多個地方使用同一個非同步元件時是否造成多次載入元件？如：

　　答：否，理由同上

　　3、如果在兩個非同步載入的頁面中分別同步與非同步載入同一個元件時是否會造成資源重用？ 如：

//a頁面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
    components: {
        historyTab
    },
}

//b頁面
export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
    },
}

　　答: 會, 將會造成資源重用, 根據打包後輸出的結果來看, a頁面中會嵌入historyTab元件的程式碼, b頁面中的historyTab元件還是採用非同步載入的方式, 另外打包chunk；

　　解決方案： 元件開發時， 如果根頁面沒有匯入元件的情況下，而是在其他非同步載入頁面中同時用到元件， 那麼為實現資源的最大利用，在協同開發的時候全部人都使用非同步載入元件

　　4、在非同步載入頁面中載嵌入非同步載入的元件時對頁面是否會有渲染延時影響？

　　答：會， 非同步載入的元件將會比頁面中其他元素滯後出現， 頁面會有瞬間閃跳影響；

　　解決方案：因為在首次載入元件的時候會有載入時間， 出現頁面滯後， 所以需要合理的進行頁面結構設計， 避免首次出現跳閃現象；

六、懶載入的最終實現方案

　　1、路由頁面以及路由頁面中的元件全都使用懶載入

　　優點：（1）最大化的實現隨用隨載

　　　　　（2）團隊開發不會因為溝通問題造成資源的重複浪費　　　　

　　缺點：（1）當一個頁面中巢狀多個元件時將傳送多次的http請求，可能會造成網頁顯示過慢且渲染參差不齊的問題

　　2、路由頁面使用懶載入， 而路由頁面中的元件按需進行懶載入, 即如果元件不大且使用不太頻繁, 直接在路由頁面中匯入元件, 如果元件使用較為頻繁使用懶載入

　　優點：（1）能夠減少頁面中的http請求，頁面顯示效果好

　　缺點：（2）需要團隊事先交流， 在框架中分別建立懶載入元件與非懶載入元件資料夾

　　3、路由頁面使用懶載入，在不特別影響首頁顯示延遲的情況下，根頁面合理匯入複用元件，再結合方案2

　　優點：（1）合理解決首頁延遲顯示問題

　　　　　（2）能夠最大化的減少http請求， 且做其他他路由介面的顯示效果最佳

　　缺點：（1）還是需要團隊交流，建立合理區分各種載入方式的元件資料夾

import()實現路由非同步載入

import()是個語法糖，返回值是一個Promise物件，意味著這需要非同步處理，你可以在.then()中拿到真正的模組。基於這點，你的截圖其實是這樣的：

{
 path: '/',
 name: 'login',
 component: () => {
   return import('xxx');
 },
}

把import包裹在函式中，當真正用到模組的時候，才執行 component().then()。這就是懶載入了