在webpack中如何使用prefetch？

什么是prefetch？

這種“資源提示” 告訴瀏覽器這是一個在未來可能使用到的資源。

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

總之:在閑置時獲取資源

什么是preload？

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

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

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

為什么Prefetch/Preload有用？

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

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

代碼分割

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

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

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

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

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

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

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

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

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

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

用這種方式將會提升用戶體驗：

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

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

在webpack中使用preload

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

• preload的塊與父塊并行加載。prefetch的塊在父塊完成之后開始加載。

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

• preload的塊會被父塊立即請求。 prefetch的塊可能會在將來的任何時間請求

• 瀏覽器支持是不同的。

preload這種特性的用例很少見。 如果模塊總是立即import()某些內(nèi)容，則可以使用它。 如果一個組件依賴一個單獨塊中的大型庫，那么這是有意義的。 示例：ChartComponent使用大的ChartingLibrary。 它在使用時顯示一個LoadingIndicator并立即導(dǎo)入（/ webpackPreload：true /“ChartingLibrary”）。 當(dāng)請求使用ChartComponent的頁面時，也會通過請求圖表庫塊。 假設(shè)頁面塊較小并且完成得更快，則將使用LoadingIndicator顯示頁面，直到已經(jīng)請求的圖表庫塊完成為止。 這將提供一點加載時間，因為它只需要一次往返而不是兩次。 特別是在高延遲環(huán)境中。

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

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

多個prefetch的塊

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

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

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

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

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

常見問題

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

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

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

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

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

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

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

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

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

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

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

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

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

廣告

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