Automatycznie pobieraj z wyprzedzeniem linki widoczne w widocznym obszarze za pomocą szybkiego linku dla aplikacji React na jednej stronie.
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:
- Zaimportuj HOC
quicklink
na początku komponentu. - 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.