Przyspiesz nawigację w aplikacji React dzięki szybkiemu linkowi

Automatycznie pobieraj z wyprzedzeniem linki widoczne w widocznym obszarze za pomocą szybkiego linku dla aplikacji React na jednej stronie.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Pobieranie z wyprzedzeniem to technika przyspieszania nawigacji przez pobieranie z odpowiednim wyprzedzeniem zasobów na następną stronę. Szybki link to biblioteka, która umożliwia stosowanie tej techniki na dużą skalę przez automatyczne pobieranie z wyprzedzeniem linków w miarę pojawiania się w widoku.

W aplikacjach wielostronicowych biblioteka pobiera z wyprzedzeniem dokumenty (np. /article.html) na potrzeby linków w widocznym obszarze, więc gdy użytkownik kliknie taki link, zostanie on pobrany z pamięci podręcznej HTTP.

W aplikacjach jednostronicowych stosuje się zwykle technikę zwaną dzieleniem kodu na podstawie tras. Dzięki temu witryna może wczytywać kod dotyczący danej trasy tylko wtedy, gdy przechodzi w niej użytkownik. Takie pliki (JS, CSS) są często nazywane „fragmentami”.

Jednak w przypadku takich witryn, zamiast wstępnego wczytywania dokumentów, największą wydajność uzyskuje się w wyniku wczytywania tych fragmentów z wyprzedzeniem, zanim strona będzie ich potrzebować.

Ich osiągnięcie wiąże się z pewnymi wyzwaniami:

• Ustalenie, które fragmenty (np. article.chunk.js) są powiązane z daną trasą (np. /article), przed dotarciem na nią nie jest proste.
• Nie można przewidzieć nazw końcowych adresów URL tych fragmentów, ponieważ nowoczesne pakiety modułów do obsługi wersji używają zwykle długoterminowego haszowania (np. article.chunk.46e51.js).

W tym przewodniku wyjaśniamy, jak Quicklink radzi sobie z tymi wyzwaniami i umożliwia korzystanie z wstępnego pobierania w aplikacjach jednostronicowych React.

Określanie fragmentów powiązanych z każdą trasą

Jednym z podstawowych komponentów quicklink jest webpack-route-manifest, wtyczka webpack, która umożliwia generowanie słownika JSON obejmującego trasy i fragmenty. Dzięki temu biblioteka wie, które pliki będą potrzebne przez poszczególne trasy aplikacji, i pobiera je z wyprzedzeniem w miarę pojawiania się tras.

Po integracji wtyczki z projektem zostanie utworzony plik manifestu JSON, który będzie wiązać każdą trasę z odpowiadającymi jej fragmentami:

{
  '/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',
    },
  ],
}

Tego pliku manifestu można zażądać na 2 sposoby:

• Z adresu URL, np. https://site_url/rmanifest.json.
• Przez obiekt window w punkcie window.__rmanifest.

Pobieraj z wyprzedzeniem fragmenty tras w widocznym obszarze

Gdy plik manifestu będzie dostępny, zainstaluj Quicklink Quicklink, uruchamiając polecenie npm install quicklink.

Następnie można użyć komponentu wyższego rzędu (HOC) withQuicklink(), aby wskazać, że dana trasa powinna zostać wstępnie pobrana, gdy link pojawi się w widoku.

Ten kod należy do komponentu App w aplikacji React, który renderuje menu główne z 4 linkami:

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>
);

Aby poinformować Quicklink, że trasy te powinny być wstępnie pobierane, gdy pojawią się w widoku:

1. Zaimportuj HOC quicklink na początku komponentu.
2. Dodaj do każdej trasy element HOC withQuicklink(), przekazując do niej komponent strony i parametr opcji.

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>
);

HOC withQuicklink() korzysta ze ścieżki trasy jako klucza do pobierania powiązanych fragmentów z usługi rmanifest.json. W miarę pojawiania się linków biblioteka wstawia na stronie tag <link rel="prefetch"> w przypadku każdego fragmentu, co umożliwia ich wstępne pobranie. Wczytane z wyprzedzeniem zasoby są żądane przez przeglądarkę z najniższym priorytetem i przechowywane w pamięci podręcznej HTTP przez 5 minut. Po tym czasie obowiązują reguły cache-control danego zasobu. W efekcie, gdy użytkownik kliknie link i przejdzie pod wybraną trasę, fragmenty zostaną pobrane z pamięci podręcznej, co znacznie skraca czas potrzebny na wyrenderowanie tej trasy.

Podsumowanie

Pobieranie z wyprzedzeniem może znacznie skrócić czas wczytywania przyszłych nawigacji. W przypadku aplikacji jednostronicowych React można to osiągnąć, wczytując fragmenty powiązane z każdą trasą, zanim użytkownik trafi do nich. Rozwiązanie Quicklink dla React SPA wykorzystuje webpack-route-manifest do tworzenia mapy tras i fragmentów w celu określenia, które pliki pobrać z wyprzedzeniem, gdy w widoku pojawi się link. Stosując tę technikę w całej witrynie, możesz znacznie poprawić nawigację, dzięki czemu pojawią się one natychmiast.