什么是prefetch？

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

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

總之:在閑置時獲取資源

什么是preload？

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

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

總之：正常獲取，及早發現

為什么Prefetch/Preload有用？

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

prefetch用于使用瀏覽器的空閑時間來加速將來的導航。 當用戶未執行預期的未來導航時，使用它可能會花費額外的帶寬。

代碼分割

我們假設您使用webpack構建龐大的應用程序，并通過import()來使用按需加載僅加載用戶當前所需的部分。

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

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

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

在webpack中使用預請求

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

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

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

這將告訴webpack在父塊完成加載時預?。ㄔ跒g覽器空閑時間內）這個按需加載的模塊。 在這個例子中：當home-chunk完成加載時，將login-chunk添加到預取隊列。 當login-chunk完成加載（實際加載，而不是預取）時，將dashboard-chunk添加到預取隊列。

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

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

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

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

在webpack中使用preload

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

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

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

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

• 瀏覽器支持是不同的。

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

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

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

多個prefetch的塊

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

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

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

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

webpackPreload與之類似，但我不認為您會需要它

常見問題

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

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

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

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

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

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

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

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

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

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

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

文章標題：在webpack中如何使用prefetch？
文章轉載：http://m.newbst.com/news20/105470.html

成都網站建設公司_創新互聯，為您提供定制開發、網站營銷、網站維護、網站策劃、營銷型網站建設、網站內鏈

廣告

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