什么是prefetch？

這種“資源提示” 告訴瀏覽器這是一個(gè)在未來(lái)可能使用到的資源。

瀏覽器通常會(huì)在空閑狀態(tài)取得這些資源，在取得資源之后擱在HTTP緩存以便于實(shí)現(xiàn)將來(lái)的請(qǐng)求。如果有多個(gè)‘預(yù)請(qǐng)求提示’則會(huì)在瀏覽器空閑時(shí)排隊(duì)執(zhí)行。當(dāng)瀏覽器離開(kāi)空閑狀態(tài)時(shí)正好在‘預(yù)請(qǐng)求’資源，那么瀏覽器會(huì)取消任何正在進(jìn)行中的請(qǐng)求（同時(shí)會(huì)將部分響應(yīng)數(shù)據(jù)放置在緩存中，而在Header中繼續(xù)使用Content-Range字段 ）并停止處理‘預(yù)請(qǐng)求’隊(duì)列。

總之:在閑置時(shí)獲取資源

什么是preload？

這種“資源提示” 告訴瀏覽器這是一種在這次導(dǎo)航中必須的資源，只是會(huì)在之后才會(huì)被使用， chrome甚至?xí)谫Y源加載后3秒沒(méi)有被使用時(shí)打印一個(gè)警告

瀏覽器通常以中等優(yōu)先級(jí)（非布局阻塞）獲取此資源。

總之：正常獲取，及早發(fā)現(xiàn)

為什么Prefetch/Preload有用？

Preload用于更早地發(fā)現(xiàn)資源并避免發(fā)起類(lèi)似瀑布一樣的請(qǐng)求。 它可以將頁(yè)面加載降低到2次往返（1. HTML，2。所有其他資源）。 使用它不會(huì)花費(fèi)額外的帶寬。

prefetch用于使用瀏覽器的空閑時(shí)間來(lái)加速將來(lái)的導(dǎo)航。 當(dāng)用戶未執(zhí)行預(yù)期的未來(lái)導(dǎo)航時(shí)，使用它可能會(huì)花費(fèi)額外的帶寬。

代碼分割

我們假設(shè)您使用webpack構(gòu)建龐大的應(yīng)用程序，并通過(guò)import()來(lái)使用按需加載僅加載用戶當(dāng)前所需的部分。

例如，我們有一個(gè)HomePage，其中包含一個(gè)LoginButton，這個(gè)按鈕用于打開(kāi)一個(gè)登錄模態(tài)框(LoginModal)。 登錄之后會(huì)跳轉(zhuǎn)到DashboardPage——可能包含其他按鈕，但這些按鈕不太常見(jiàn)。

為了獲得更好的用戶體驗(yàn)，你在LoginButton那里使用import("LoginModal") 來(lái)保持主頁(yè)的體積達(dá)到最小。與之類(lèi)似的，LoginModal包含import("DashboardPage")

現(xiàn)在，這個(gè)示例程序被拆分為至少3塊：home-chunk，login-chunk，dashboard-chunk。 在初始加載時(shí)，只需要加載home-chunk，這會(huì)產(chǎn)生很好的用戶體驗(yàn)。 但是當(dāng)用戶單擊LoginButton時(shí)，在LoginModal打開(kāi)之前會(huì)有一段延遲，因?yàn)樾枰虞d應(yīng)用程序的這一部分。 DashboardPage與之類(lèi)似。

在webpack中使用預(yù)請(qǐng)求

新的prefetch功能可以改善這個(gè)工作流程。 并且這非常容易。

在LoginButton處，把import("LoginModal") 改成 import(/ webpackPrefetch: true / "LoginModal")

同樣的把 import("DashboardPage") 改成import(/ webpackPrefetch: true / "DashboardPage")

這將告訴webpack在父塊完成加載時(shí)預(yù)取（在瀏覽器空閑時(shí)間內(nèi)）這個(gè)按需加載的模塊。 在這個(gè)例子中：當(dāng)home-chunk完成加載時(shí)，將login-chunk添加到預(yù)取隊(duì)列。 當(dāng)login-chunk完成加載（實(shí)際加載，而不是預(yù)取）時(shí)，將dashboard-chunk添加到預(yù)取隊(duì)列。

假設(shè)home-chunk是一個(gè)入口，那么它將會(huì)被添加到html文件里。 login-chunk是一個(gè)按需加載模塊，因此一旦login-chunk加載完成，webpack運(yùn)行時(shí)將負(fù)責(zé)注入。

用這種方式將會(huì)提升用戶體驗(yàn)：

當(dāng)用戶訪問(wèn)HomePage時(shí)。 這時(shí)的用戶體驗(yàn)和性能與以前一樣。一旦HomePage完成加載，瀏覽器就會(huì)進(jìn)入空閑狀態(tài)并開(kāi)始在后臺(tái)獲取login-chunk。而用戶并不會(huì)注意到這一點(diǎn)。 假設(shè)用戶需要一些時(shí)間來(lái)查找LoginButton，那么預(yù)請(qǐng)求將在用戶單擊按鈕之前完成。 當(dāng)用戶單擊該按鈕時(shí)，login-chunk已經(jīng)位于HTTP緩存中，瀏覽器僅會(huì)花費(fèi)最少的時(shí)間來(lái)命中緩存中的數(shù)據(jù)，那么用戶將立即看到LoginModal。 同時(shí)，webpack運(yùn)行時(shí)將dashboard-chunk添加到預(yù)取隊(duì)列，因此登錄后加載dashboard-chunk也不需要額外的時(shí)間。

請(qǐng)注意，用戶可能并不總是具有這種即時(shí)LoginModal體驗(yàn)。 對(duì)LoginButton來(lái)說(shuō)，有許多因素會(huì)使chunk重新加載以至于延遲：慢速網(wǎng)絡(luò)，用戶快速點(diǎn)擊，在帶寬有限的設(shè)備上禁用預(yù)取，沒(méi)有預(yù)取瀏覽器支持，塊的執(zhí)行速度非常慢，......

在webpack中使用preload

與import（/ webpackPrefetch：true /“...”）類(lèi)似，也可以使用import（/ webpackPreload：true /“...”）。 與預(yù)取相比，這有很多不同之處：

• preload的塊與父塊并行加載。prefetch的塊在父塊完成之后開(kāi)始加載。

• preload的塊具有中等優(yōu)先級(jí)并立即下載。prefetch的塊在瀏覽器空閑時(shí)間下載。

• preload的塊會(huì)被父塊立即請(qǐng)求。 prefetch的塊可能會(huì)在將來(lái)的任何時(shí)間請(qǐng)求

• 瀏覽器支持是不同的。

preload這種特性的用例很少見(jiàn)。 如果模塊總是立即import()某些內(nèi)容，則可以使用它。 如果一個(gè)組件依賴(lài)一個(gè)單獨(dú)塊中的大型庫(kù)，那么這是有意義的。 示例：ChartComponent使用大的ChartingLibrary。 它在使用時(shí)顯示一個(gè)LoadingIndicator并立即導(dǎo)入（/ webpackPreload：true /“ChartingLibrary”）。 當(dāng)請(qǐng)求使用ChartComponent的頁(yè)面時(shí)，也會(huì)通過(guò)請(qǐng)求圖表庫(kù)塊。 假設(shè)頁(yè)面塊較小并且完成得更快，則將使用LoadingIndicator顯示頁(yè)面，直到已經(jīng)請(qǐng)求的圖表庫(kù)塊完成為止。 這將提供一點(diǎn)加載時(shí)間，因?yàn)樗恍枰淮瓮刀皇莾纱巍?特別是在高延遲環(huán)境中。

如果使用webpackPreload不當(dāng)實(shí)際上會(huì)損害性能，因此要小心使用它。

在考慮預(yù)加載與預(yù)請(qǐng)求時(shí)，您可能需要預(yù)請(qǐng)。 但是要注意：此聲明與webpack import()有關(guān)。 在HTML頁(yè)面中，您可能需要預(yù)加載。

多個(gè)prefetch的塊

您可以將webpackPrefetch標(biāo)志添加到任意數(shù)量的import()，但請(qǐng)注意所有prefetch的塊都會(huì)爭(zhēng)奪帶寬。 它們實(shí)際上是排隊(duì)的，當(dāng)用戶請(qǐng)求它時(shí)，真正使用的塊可能不會(huì)被預(yù)取。

當(dāng)所有塊被請(qǐng)求的可能性相同時(shí)，這不是一個(gè)大問(wèn)題。 但是當(dāng)某些塊比其他塊被訪問(wèn)的可能性更大時(shí)，您可能想要控制prefetch的順序。

幸運(yùn)的是，我們可以讓你滿意。 （注意這是一個(gè)高級(jí)用例。）

您可以傳遞數(shù)字作為值，而不是使用webpackPrefetch:true。 webpack將按您指定的順序預(yù)取塊。比如：webpackPrefetch:42將在webpackPrefetch:1之前被預(yù)取，它將在webpackPrefetch:true之前被預(yù)取，它將在webpackPrefetch:-99999（如z-order）之前被預(yù)取。 實(shí)際上，true等價(jià)于為0。

webpackPreload與之類(lèi)似，但我不認(rèn)為您會(huì)需要它

常見(jiàn)問(wèn)題

如果多個(gè)import()請(qǐng)求相同的塊并且其中一些被預(yù)取/預(yù)加載怎么辦？ 預(yù)加載勝過(guò)預(yù)取。 在同一類(lèi)別中，更高優(yōu)先級(jí)獲勝。

如果瀏覽器不支持預(yù)取/預(yù)加載怎么辦？ 它會(huì)被瀏覽器忽略。 webpack不會(huì)嘗試做任何后備。 不管怎樣這都是一個(gè)暗示，所以即使是支持它的瀏覽器也可能會(huì)忽略它，如果他們感覺(jué)如此。

Prefetch/preload在入口點(diǎn)中不起作用。 有什么問(wèn)題？ webpack運(yùn)行時(shí)只負(fù)責(zé)按需加載的塊的Prefetch/preload。 當(dāng)在entry chunk中使用預(yù)取/預(yù)加載時(shí)，html會(huì)添加標(biāo)記到HTML。 stats.json在entrypoints[].childAssets中提供了信息

為什么不在每個(gè)import()上使用prefetch / preload？ 你浪費(fèi)了很多帶寬。 有選擇地將它用于很可能被訪問(wèn)的import()也更有益。 不要浪費(fèi)帶寬。

我不需要/想要這個(gè)功能。 不使用它的成本是多少？ 只有在您的一個(gè)按需加載的塊中使用此功能時(shí)，才會(huì)添加運(yùn)行時(shí)代碼。 因此，當(dāng)不使用它時(shí)，您不必支付任何開(kāi)銷(xiāo)。

我已經(jīng)在import（）上有一個(gè)comment了。 我可以添加多個(gè)嗎？ 是的，要么用單獨(dú)的comment分開(kāi)，要么在單獨(dú)的評(píng)論中：

import( /* webpackChunkName: "test", webpackPrefetch: true */ "LoginModal")// orimport( /* webpackChunkName: "test" */ /* webpackPrefetch: true */ "LoginModal")// spacing optional

我使用rollup構(gòu)建我的庫(kù)，并使用import(), 我的庫(kù)中使用webpack的用戶可以從prefetch中獲益嗎？是的，您可以將webpack魔術(shù)注釋添加到import()中，rollup將保留注釋。 當(dāng)使用webpack構(gòu)建它的結(jié)果時(shí)，它將使用注釋。 如果沒(méi)有使用webpack構(gòu)建，評(píng)論將被minimizers刪除。

我不確定是否為特定import()添加預(yù)取可以提高性能。 我應(yīng)該加嗎？ 最好的衡量標(biāo)準(zhǔn)。 A / B測(cè)試。 這里沒(méi)有一般建議。 它取決于用戶訪問(wèn)此應(yīng)用程序路徑的概率。

我已經(jīng)有一個(gè)service worker，可以在加載時(shí)緩存整個(gè)應(yīng)用程序。 使用預(yù)取對(duì)我有意義嗎？ 這取決于您的應(yīng)用程序。 通常，這種service worker無(wú)順序加載應(yīng)用程序的所有資產(chǎn)，而預(yù)取允許指定順序并依賴(lài)于用戶在應(yīng)用程序中的實(shí)際位置。 預(yù)取也可以提高帶寬效率，并且只能在瀏覽器空閑時(shí)下載。 與第一次用戶導(dǎo)航發(fā)生時(shí)相比，測(cè)量在低帶寬環(huán)境中下載整個(gè)應(yīng)用程序所需的時(shí)間。 在大型應(yīng)用程序中，使用預(yù)取代替是有意義的。

我想將初始頁(yè)面加載拆分為關(guān)鍵資源和非關(guān)鍵資源，并按此順序加載它們。 預(yù)加載有幫助嗎？ 是的，您可以將關(guān)鍵資源放入入口點(diǎn)，將非關(guān)鍵資源放在import（/webpackPreload：true/）之后。 注意不要忘記為entry chunk 添加（在子標(biāo)記之前）。

當(dāng)前標(biāo)題：在webpack中如何使用prefetch？
網(wǎng)頁(yè)路徑：http://jinyejixie.com/news/105470.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、ChatGPT、面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、App開(kāi)發(fā)、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)