prefetch
<link rel="prefetch" ></link>
這段代碼告訴瀏覽器审姓，這段資源將會(huì)在未來某個(gè)導(dǎo)航或者功能要用到园担，但是本資源的下載順序權(quán)重比較低。也就是說prefetch通常用于加速下一次導(dǎo)航缅糟，而不是本次的挺智。
被標(biāo)記為prefetch的資源，將會(huì)被瀏覽器在空閑時(shí)間加載窗宦。
preload
<link rel="preload" ></link>
preload通常用于本頁(yè)面要用到的關(guān)鍵資源赦颇，包括關(guān)鍵js、字體赴涵、css文件媒怯。preload將會(huì)把資源得下載順序權(quán)重提高，使得關(guān)鍵數(shù)據(jù)提前下載好髓窜，優(yōu)化頁(yè)面打開速度扇苞。
webpack 搭配prefetch優(yōu)化單頁(yè)面應(yīng)用code-splitting
單頁(yè)面應(yīng)用由于頁(yè)面過多欺殿，可能會(huì)導(dǎo)致代碼體積過大，從而使得首頁(yè)打開速度過慢鳖敷。所以切分代碼脖苏，優(yōu)化首屏打開速度尤為重要。
但是所有的技術(shù)手段都不是完美的定踱。當(dāng)我們切割代碼后棍潘，首屏的js文件體積減少了好多。但是也有一個(gè)突出的問題：
那就是當(dāng)跳轉(zhuǎn)其他頁(yè)面的時(shí)候崖媚，需要下載相應(yīng)頁(yè)面的js文件亦歉，這就導(dǎo)致體驗(yàn)極其不好，每一次點(diǎn)擊訪問新頁(yè)面都要等待js文件下載畅哑，然后再去請(qǐng)求接口獲取數(shù)據(jù)鳍徽。頻繁出現(xiàn)loading動(dòng)畫的體驗(yàn)真的不好
所以如果我們?cè)谶M(jìn)入首頁(yè)后，在瀏覽器的空閑時(shí)間提前下好用戶可能會(huì)點(diǎn)擊頁(yè)面的js文件敢课，這樣首屏的js文件大小得到了控制阶祭，而且再點(diǎn)擊新頁(yè)面的時(shí)候，相關(guān)的js文件已經(jīng)下載好了直秆，就不再會(huì)出現(xiàn)loading動(dòng)畫濒募。
動(dòng)態(tài)引入js文件，實(shí)現(xiàn)code-splitting圾结，減少首屏打開時(shí)間
// 代碼分割后的react組件
const Brand = asyncComponent(() => import(
/*webpackChunkName: 'mp-supports'*/
'./views/Brand'
))
// 路由引入
<Route path="/" component={App}>
<Route path="/brand" component={Brand} />
</Route>
首頁(yè)組件的生命周期：
// 在接口取的數(shù)據(jù)后瑰剃，進(jìn)行prefetch
componentDidUpdate({ topics }) {
if( topics.length === 0 && this.props.topics.length > 0 ) {
// 實(shí)行prefetch，注意只有webpack 4版本才支持prefetch功能筝野。
import(
/* webpackPrefetch: true */
/*webpackChunkName: 'topic'*/
"../topic"
)
}
}
關(guān)鍵點(diǎn)：
/webpackChunkName: 'chunk-name'/
componentDidUpdate
這里有兩個(gè)關(guān)鍵點(diǎn)：
- webpack的動(dòng)態(tài)import()需要指定包命晌姚，如果不在注釋中說明包名，那么用了幾次import() , webpack就會(huì)給同一個(gè)文件打包多少次歇竟。使得我們prefetch的文件和路由中要用到的文件并不是同一個(gè)文件挥唠。
2.prefetch會(huì)在瀏覽器空閑時(shí)，下載相應(yīng)文件焕议。這是一個(gè)很籠統(tǒng)的定義宝磨，在我的使用中，我發(fā)現(xiàn)在接口沒有返回?cái)?shù)據(jù)盅安，以及圖片等還沒有請(qǐng)求成功時(shí)唤锉，prefetch就會(huì)請(qǐng)求數(shù)據(jù)了。這一點(diǎn)是很不好的别瞭，最起碼prefetch不能影響首頁(yè)接口的獲取速度窿祥。所以我把prefetch的執(zhí)行事件放在了componentDidUpdate生命周期內(nèi)。保障了prefetch的執(zhí)行蝙寨，不會(huì)影響到關(guān)鍵的首頁(yè)數(shù)據(jù)獲取晒衩。
當(dāng)然prefetch在服務(wù)端渲染的頁(yè)面并不會(huì)有影響接口的問題号胚，是一個(gè)比較好的技術(shù)選擇。
參考資料
Preload, Prefetch And Priorities in Chrome
Preload: What Is It Good For?
