一、 什么是懶加載
懶加載也叫延遲加載，即在需要的時候進行加載，隨用隨載。
二、為什么需要懶加載
在單頁應用中，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內容過多，延時過長，不利於用戶體驗，而運用懶加載則可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。
三、具體實例中實現懶加載
1、路由中配置異步組件
|
1
2
3
4
5
6
7
8
9
10
|
export
default
new
Router({
routes: [
{
mode:
'history'
,
path:
'/my'
,
name:
'my'
,
component: resolve => require([
'../page/my/my.vue'
], resolve),
//懶加載
},
]
})
|
2、實例中配置異步組件
|
1
2
3
4
|
components: {
historyTab: resolve => {require([
'../../component/historyTab/historyTab.vue'
], resolve)},
//懶加載
//historyTab: () => import('../../component/historyTab/historyTab.vue')
},
|
3、全局注冊異步組件
|
1
2
3
|
Vue.component(
'mideaHeader'
, () => {
System.
import
(
'./component/header/header.vue'
)
})
|
四、配置異步組件實現懶加載的問題分析
1、多次進出同一個異步加載頁面是否會造成多次加載組件？
答：否，首次需要用到組件時瀏覽器會發送請求加載組件，加載完將會緩存起來，以供之后再次用到該組件時調用
2、在多個地方使用同一個異步組件時是否造成多次加載組件？如：
答：否，理由同上
3、如果在兩個異步加載的頁面中分別同步與異步加載同一個組件時是否會造成資源重用？
答: 會, 將會造成資源重用, 解決方案： 組件開發時， 如果根頁面沒有導入組件的情況下，而是在其他異步加載頁面中同時用到組件， 那么為實現資源的最大利用，在協同開發的時候全部人都使用異步加載組件
4、在異步加載頁面中載嵌入異步加載的組件時對頁面是否會有渲染延時影響？
答：會， 異步加載的組件將會比頁面中其他元素滯后出現， 頁面會有瞬間閃跳影響；
解決方案：因為在首次加載組件的時候會有加載時間， 出現頁面滯后， 所以需要合理的進行頁面結構設計， 避免首次出現跳閃現象；
六、懶加載的最終實現方案
1、路由頁面以及路由頁面中的組件全都使用懶加載
優點：（1）最大化的實現隨用隨載
（2）團隊開發不會因為溝通問題造成資源的重復浪費
缺點：（1）當一個頁面中嵌套多個組件時將發送多次的http請求，可能會造成網頁顯示過慢且渲染參差不齊的問題
2、路由頁面使用懶加載， 而路由頁面中的組件按需進行懶加載, 即如果組件不大且使用不太頻繁, 直接在路由頁面中導入組件, 如果組件使用較為頻繁使用懶加載
優點：（1）能夠減少頁面中的http請求，頁面顯示效果好
缺點：（2）需要團隊事先交流， 在框架中分別建立懶加載組件與非懶加載組件文件夾
3、路由頁面使用懶加載，在不特別影響首頁顯示延遲的情況下，根頁面合理導入復用組件，再結合方案2
優點：（1）合理解決首頁延遲顯示問題
（2）能夠最大化的減少http請求， 且做其他他路由界面的顯示效果最佳
缺點：（1）還是需要團隊交流，建立合理區分各種加載方式的組件文件夾