Przyspiesz nawigację w aplikacji React dzięki szybkiemu linkowi

automatycznie pobierać w poprzednim ładowaniu linki w widocznym obszarze za pomocą szybkiego linku w przypadku aplikacji jednostronicowych 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 wdrażanie tej techniki na dużą skalę poprzez automatyczne pobieranie wstępne 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 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.
• 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ś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, 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:

• Według 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, zainstaluj Quicklink, uruchamiając npm install quicklink.

Następnie można użyć elementu wyższego rzędu (HOC) withQuicklink(), aby wskazać, że dany szlak powinien być pobierany w tle, 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 powiedzieć Quicklink, że te trasy powinny być pobierane z poziomu pamięci podręcznej, gdy tylko pojawią się w widoku:

1. Zaimportuj HOC quicklink na początku komponentu.
2. Każdą ścieżkę 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 pobierania 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 aplikacjach jednostronicowych React można to osiągnąć, ładują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.