使用 Quicklink 在 React 中加快瀏覽速度

使用 React 單一頁面應用程式的快速連結,自動預先擷取可視區域連結。

Addy Osmani
Addy Osmani
Anton Karlovskiy
Anton Karlovskiy
Demián Renzulli
Demián Renzulli

預先擷取是一種事先載入下一頁的資源,可加快瀏覽速度,Quicklink 程式庫可讓您大規模導入這項技術,方法是在連結進入檢視畫面中時自動擷取連結。

在多頁應用程式中,程式庫會預先擷取可視區域連結的文件 (例如 /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 應在進入檢視時預先擷取這些路線:

  1. 在元件開頭匯入 quicklink HOC。
  2. 使用 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 單頁應用程式中,使用者到達目的地前,會先載入與各路徑相關聯的區塊,藉此達到這個效果。 React SPA 的 Quicklink 解決方案會使用 webpack-route-manifest 建立路徑和區塊圖,以便在連結進入檢視畫面中時,決定要預先擷取哪些檔案。 在整個網站採用這種做法可大幅改善導覽至立即呈現的重點。