性能優(yōu)化的手段
目標(biāo)：降低打包后文件大小舔痪，提高首屏加載速度
手段：
1.懶加載
運(yùn)用懶加載則可以將路由對(duì)應(yīng)的頁面組件獨(dú)立分開锌唾，
路由被訪問時(shí)候，再加載對(duì)應(yīng)的組件頁面滋捶，
防止首頁一次性加載太多信息余黎，造成用戶等待時(shí)間過長(zhǎng)的問題
實(shí)現(xiàn)方式:
1.異步組件 promise
方法1
import Header form '@/components/head'
components:{
headerNav:(resolve)=>{
setTimeout(()=>{
resolve(Header)
},2000)
}
}
方法2
components:{
headerNav:(resolve)=>{
setTimeout(()=>{
resolve(require('@/components/head'))
},2000)
}
}
2.webpack代碼分割 require.ensure ，只會(huì)加載一次驯耻，反復(fù)觸發(fā)不會(huì)反復(fù)加載
1.寫法1
let Head = (resolve)=>{
return require.ensure([],()=>{
resolve(require('@/components/head'))
},"xxx")
}
格式：
let Head = (resolve)=>{
return require.ensure([依賴],回調(diào)函數(shù))
}
寫法1特殊功能：
xxx是可選項(xiàng)可缚，可以不寫，但是如果有多個(gè)寫了這個(gè)相同參數(shù)的帘靡，會(huì)被打包成一個(gè)JS文件
2.寫法2 (無法完成多個(gè)組件合并)
let Head = (resolve)=>{
return import('@/components/head')
}
寫法2 沒有寫法1的代碼合并功能
