Przyspiesz nawigację w aplikacji React dzięki szybkiemu linkowi

automatycznie pobierać wstępnie linki w widocznym obszarze za pomocą szybkiego linku w przypadku aplikacji jednostronicowych React;

Addy Osmani
Anton Karlovskiy
Demián Renzulli

Pobieranie wstępne to technika przyspieszania nawigacji przez pobieranie zasobów do następnej strony z wyprzedzeniem. Quicklink to biblioteka, która umożliwia wdrażanie tej techniki na dużą skalę poprzez automatyczne pobieranie wstępnie linków w miarę ich wyświetlania.

W przypadku aplikacji wielostronicowych biblioteka pobiera wstępnie dokumenty (np. /article.html) dla linków w widoku, aby po kliknięciu przez użytkownika mogły być pobrane z pamięci podręcznej HTTP.

Aplikacje na jednej stronie często korzystają z techniki zwanej dzieleniem kodu na podstawie ścieżki. Dzięki temu witryna wczytuje kod danej ścieżki tylko wtedy, gdy użytkownik ją otworzy. Te pliki (JS, CSS) są często nazywane „fragmentami”.

Zamiast pobierania dokumentów w poprzednim etapie, w przypadku tych witryn największe korzyści w zakresie wydajności przynosi pobieranie tych fragmentów przed pobraniem ich przez stronę.

Osiągnięcie tego celu wiąże się z pewnymi wyzwaniami:

  • Trudno jest określić, które fragmenty (np. article.chunk.js) są powiązane z danym szlakiem (np. /article) przed jego wyświetleniem.
  • Nazwa końcowego adresu URL tych fragmentów nie może być przewidywana, ponieważ nowoczesne moduły pakietów zwykle używają długoterminowego haszowania do wersji (np. article.chunk.46e51.js).

Z tego przewodnika dowiesz się, jak Quicklink rozwiązuje te problemy i umożliwia prefetching na dużą skalę w jednostronnych aplikacjach React.

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

Jednym z podstawowych komponentów quicklink jest webpack-route-manifest, czyli wtyczka webpack, która umożliwia generowanie słownika JSON z trasami i fragmentami. Dzięki temu biblioteka wie, które pliki będą potrzebne na każdej trasie w aplikacji, i pobiera je z wyprzedzeniem, gdy tylko się pojawią.

Po zintegrowaniu wtyczki z projektem zostanie utworzony plik manifestu JSON, który powiąże każdą trasę z odpowiednimi 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',
    },
  ],
}

Plik manifestu można poprosić na 2 sposoby:

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

Pobieranie wstępnie fragmentów danych dla tras w widoku

Gdy plik manifestu będzie dostępny, następnym krokiem będzie zainstalowanie Quicklinka. Aby to zrobić, uruchom npm install quicklink.

Następnie element wyższego rzędu (HOC) withQuicklink() może wskazywać, że dany szlak powinien być pobierany w ramach wstępnego pobierania, gdy link pojawi się w widoku.

Ten kod należy do komponentu App aplikacji React, który renderuje górne menu 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 powiedzieć Quicklink, że te trasy powinny być pobierane z poziomu pamięci podręcznej, gdy tylko pojawią się w widoku:

  1. Zaimportuj quicklinkHOC na początku komponentu.
  2. Każdą trasę owiń komponentem wyższego rzędu withQuicklink(), przekazując mu parametr komponentu strony i 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>
);

withQuicklink() HOC używa ścieżki trasy jako klucza do uzyskiwania powiązanych fragmentów z rmanifest.json. Gdy linki pojawiają się w widoku, biblioteka wstrzykuje tag <link rel="prefetch"> na stronie dla każdego fragmentu, aby można było go wstępnie pobrać. Zasoby pobrane w ramach wstępnego pobierania będą żądane przez przeglądarkę z najniższym priorytetem i przechowywane w pamięci podręcznej HTTP przez 5 minut, po czym zaczną obowiązywać cache-control zasady dotyczące zasobu. W efekcie, gdy użytkownik kliknie link i przejdzie do danej trasy, fragmenty zostaną pobrane z pamięci podręcznej, co znacznie skróci czas renderowania tej trasy.

Podsumowanie

Wstępne pobieranie może znacznie skrócić czas wczytywania podczas kolejnych nawigacji. W przypadku aplikacji jednostronicowych w React można to osiągnąć, wczytując fragmenty powiązane z każdą ścieżką przed tym, jak użytkownik na nie wejdzie. Rozwiązanie Quicklink dla React SPA używa funkcji webpack-route-manifest do tworzenia mapy tras i fragmentów, aby określić, które pliki mają być pobierane z wyprzedzeniem, gdy link pojawi się na ekranie. Wdrożenie tej techniki w całej witrynie może znacznie usprawnić nawigację, aż do tego stopnia, że będzie ona wyglądać na natychmiastową.