使用 React 單一頁面應用程式的快速連結,自動擷取可視區域中的連結。
「預先擷取」是一種技術,可以事先下載下一頁的資源,藉此加快瀏覽速度。快速連結程式庫可讓您大規模導入這項技術,可在連結進入檢視畫面時自動預先擷取連結。
在多頁面應用程式中,程式庫會預先擷取使用中連結的文件 (例如 /article.html
),以便在使用者點選這些連結時從 HTTP 快取中擷取。
單頁應用程式通常使用「路徑式程式碼分割」技術。如此一來,網站只有在使用者前往特定路線時,才能載入特定路線的程式碼。這些檔案 (JS、CSS) 通常稱為「區塊」。
話雖如此,這類網站在網頁需要前先預先擷取區塊,而不是預先擷取文件,才能獲得最大成效。
達成此目標是一項挑戰:
- 要判斷哪些區塊 (例如
article.chunk.js
) 在到達目的地之前與特定路線 (例如/article
) 具有關聯並不重要。 - 現代模組組合器通常會使用長期雜湊進行版本管理 (例如
article.chunk.46e51.js
),因此無法預測這些區塊的最終到達網址名稱。
本指南將說明 Quicklink 如何解決這些挑戰,並協助您在 React 單頁應用程式中大規模執行預先擷取作業。
判斷與每條路線相關的區塊
quicklink
的核心元件之一是「webpack-route-manifest」,這個 webpack 外掛程式可讓您產生路徑和區塊的 JSON 字典。這會讓程式庫得知應用程式每個路徑需要哪些檔案,並在路徑進入檢視頁面時預先擷取這些檔案。
將外掛程式與專案整合之後,就會產生 JSON 資訊清單檔案,將每條路徑與其對應的區塊建立關聯:
{
'/about': [
{
type: 'style',
href: '/static/css/about.f6fd7d80.chunk.css',
},
{
type: 'script',
href: '/static/js/about.1cdfef3b.chunk.js',
},
],
'/blog': [
{
type: 'style',
href: '/static/css/blog.85e80e75.chunk.css',
},
{
type: 'script',
href: '/static/js/blog.35421503.chunk.js',
},
],
}
您可以透過兩種方式要求這個資訊清單檔案:
- 使用網址上傳,例如
https://site_url/rmanifest.json
。 - 透過視窗物件 (位於
window.__rmanifest
)。
預先擷取可視區域路徑的區塊
取得資訊清單檔案後,下一步就是執行 npm install quicklink
安裝 Quicklink。
然後,您可以使用高階元件 (HOC) withQuicklink()
,指出應在連結進入檢視畫面時預先擷取指定路徑。
以下程式碼屬於 React 應用程式的 App
元件,可顯示包含四個連結的頂端選單:
const App = () => (
<div className={style.app}>
<Hero />
<main className={style.wrapper}>
<Suspense fallback={<div>Loading…</div>}>
<Route path="/" exact component={Home} />
<Route path="/blog" exact component={Blog} />
<Route path="/blog/:title" component={Article} />
<Route path="/about" exact component={About} />
</Suspense>
</main>
<Footer />
</div>
);
如要告知 Quicklink 應在進入檢視時預先擷取這些路徑:
- 在元件開頭匯入
quicklink
HOC。 - 使用
withQuicklink()
HOC 納入每個路徑,並將頁面元件和選項參數傳遞至該路徑。
const options = {
origins: [],
};
const App = () => (
<div className={style.app}>
<Hero />
<main className={style.wrapper}>
<Suspense fallback={<div>Loading…</div>}>
<Route path="/" exact component={withQuicklink(Home, options)} />
<Route path="/blog" exact component={withQuicklink(Blog, options)} />
<Route
path="/blog/:title"
component={withQuicklink(Article, options)}
/>
<Route path="/about" exact component={withQuicklink(About, options)} />
</Suspense>
</main>
<Footer />
</div>
);
withQuicklink()
HOC 會使用路徑路徑做為索引鍵,從 rmanifest.json
取得相關區塊。實際上,當連結進入檢視區塊時,程式庫會在網頁中為每個區塊插入 <link rel="prefetch">
標記,以便預先擷取。瀏覽器會以最低優先順序要求預先擷取的資源,並保留在 HTTP 快取中 5 分鐘,之後就會套用資源的 cache-control
規則。因此,當使用者按一下連結並移至指定路線時,便會從快取中擷取區塊,從而大幅改善轉譯該路徑所需的時間。
結論
預先擷取可大幅縮短日後瀏覽時的載入時間。在 React 單頁應用程式中,在使用者進入路徑前,可以先載入與每個路徑相關聯的區塊。Quicklink 的 React SPA 解決方案使用 webpack-route-manifest
建立路徑和區塊地圖,以便在連結進入檢視畫面時判斷要預先擷取哪些檔案。在整個網站導入這項技巧,可以大幅改善瀏覽方式,讓使用者能夠立即看到搜尋結果。