Przyspiesz nawigację w aplikacji React dzięki szybkiemu linkowi

Automatycznie pobieraj wstępnie linki w widocznym obszarze za pomocą szybkiego linku dla aplikacji na jednej stronie React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Pobieranie z wyprzedzeniem to technika przyspieszania nawigacji przez pobieranie zasobów następnej strony z wyprzedzeniem. Quicklink to biblioteka, która umożliwia wdrożenie tej metody na dużą skalę dzięki automatycznemu pobieraniu z wyprzedzeniem linków, które otwierają się w przeglądarce.

W aplikacjach wielostronicowych biblioteka wstępnie pobiera dokumenty (np./article.html) w przypadku linków w widocznym obszarze. Dzięki temu po kliknięciu tych linków użytkownik może pobrać je z pamięci podręcznej HTTP.

Aplikacje jednostronicowe często stosują technikę zwaną podziałem kodu na podstawie trasy. Dzięki temu witryna będzie wczytywać kod danej trasy tylko wtedy, gdy użytkownik przejdzie na tę trasę. Pliki te (JS, CSS) są często nazywane „fragmentami”.

Mając to na uwadze, w takich witrynach zamiast pobierania dokumentów z wyprzedzeniem największy wzrost wydajności wynika z pobierania tych fragmentów z wyprzedzeniem, zanim strona będzie ich potrzebować.

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

• Nie jest łatwo ustalić, które fragmenty (np. article.chunk.js) są powiązane z daną trasą (np. /article) przed wylądowaniem na niej.
• Ostatecznych nazw adresów URL tych fragmentów nie da się przewidzieć, ponieważ nowoczesne pakiety pakietów modułów zwykle używają długoterminowego haszowania na potrzeby obsługi wersji (np. article.chunk.46e51.js).

Z tego przewodnika dowiesz się, jak Quicklink radzi sobie z tymi wyzwaniami i umożliwia na dużą skalę pobieranie z wyprzedzeniem w aplikacjach na jednej stronie React.

Określ fragmenty powiązane z każdą trasą

Jednym z podstawowych komponentów usługi quicklink jest webpack-route-manifest – wtyczka webpack, która umożliwia generowanie słownika JSON tras i fragmentów. Dzięki temu biblioteka wie, które pliki będą potrzebne przez każdą trasę aplikacji, i pobiera je z wyprzedzeniem, gdy trasy pojawią się w widoku.

Po zintegrowaniu wtyczki z projektem zostanie utworzony plik manifestu JSON powiązany z 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',
    },
  ],
}

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

• Według adresu URL, np. https://site_url/rmanifest.json
• Przez obiekt window, window.__rmanifest.

Pobieraj z wyprzedzeniem fragmenty dla tras w widocznym obszarze

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

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

Ten kod należy do komponentu App 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 te trasy powinny być wstępnie pobierane w widoku:

1. Zaimportuj HOC quicklink na początku komponentu.
2. Zapakuj każdą trasę za pomocą 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() wykorzystuje ścieżkę trasy jako klucz do pobierania powiązanych fragmentów z rmanifest.json. Gdy linki pojawiają się w widoku, biblioteka wstrzykuje na stronie tag <link rel="prefetch">, który pozwala wstępnie pobrać na stronie każdy fragment. Wstępnie pobrane zasoby będą wysyłane przez przeglądarkę z najniższym priorytetem i przechowywane w pamięci podręcznej HTTP przez 5 minut. Po tym czasie będą obowiązywać reguły cache-control dotyczące zasobu. Gdy użytkownik kliknie link i przejdzie na daną trasę, fragmenty zostaną pobrane z pamięci podręcznej, co znacznie skraca czas wyrenderowania takiej trasy.

Podsumowanie

Pobieranie z wyprzedzeniem może znacznie skrócić czas wczytywania na potrzeby przyszłych nawigacji. W aplikacjach jednostronicowych React można to osiągnąć, wczytując fragmenty powiązane z poszczególnymi trasami, zanim użytkownik trafi na nie. Rozwiązanie Quicklink do platformy React SPA wykorzystuje webpack-route-manifest do tworzenia mapy tras i fragmentów w celu określenia, które pliki należy pobrać z wyprzedzeniem, gdy link pojawi się w widoku. Zastosowanie tej techniki w całej witrynie może znacznie usprawnić nawigację do tego stopnia, że staje się ona natychmiast widoczna.