React tek sayfalı uygulamalar için hızlı bağlantıyla görüntü alanı içi bağlantıları otomatik olarak önceden getirme.
Önceden getirme, sonraki sayfanın kaynaklarını önceden indirerek gezinmeyi hızlandırmak için kullanılan bir tekniktir. Hızlı Bağlantı, görüntüye geldikçe bağlantıları otomatik olarak ön besleyerek bu tekniği geniş ölçekte uygulamanıza olanak tanıyan bir kitaplıktır.
Çok sayfalı uygulamalarda kitaplık, görüntü alanı içindeki bağlantılar için belgeleri (ör./article.html
) önceden getirir. Böylece kullanıcı bu bağlantıları tıkladığında HTTP önbelleğinden alınabilirler.
Tek sayfalık uygulamalar genellikle yönlendirmeye dayalı kod bölme adlı bir teknik kullanır. Bu sayede site, belirli bir rotanın kodunu yalnızca kullanıcı bu rotaya gittiğinde yükleyebilir. Bu dosyalar (JS, CSS) genellikle "parçalar" olarak adlandırılır.
Bununla birlikte, bu sitelerde en büyük performans kazancı, belgeleri önceden getirme yerine bu parçaların sayfaya ihtiyaç duymadan önce önceden getirilmesidir.
Bu hedefe ulaşmak bazı zorluklar içerir:
- Belirli bir rotaya (ör.
/article
) ulaşmadan önce hangi parçaların (ör.article.chunk.js
) bu rotayla ilişkili olduğunu belirlemek kolay değildir. - Modern modül paketleyiciler genellikle sürüm oluşturma için uzun süreli karma oluşturma işlemi kullandığından (ör.
article.chunk.46e51.js
), bu parçaların nihai URL adları tahmin edilemez.
Bu kılavuzda, Quicklink'in bu zorlukları nasıl çözdüğü ve React tek sayfalı uygulamalarında büyük ölçekte ön getirme yapmanıza olanak tanıdığı açıklanmaktadır.
Her rotayla ilişkili parçaları belirleme
quicklink
'ün temel bileşenlerinden biri, rotalar ve parçalardan oluşan bir JSON sözlüğü oluşturmanıza olanak tanıyan webpack eklentisi olan webpack-route-manifest'tir.
Bu sayede kitaplık, uygulamanın her rotası için hangi dosyalara ihtiyaç duyulacağını bilir ve rotalar görüntülenmeye başladığında bunları önceden getirir.
Eklentiyi projeye entegre ettikten sonra, her rotayı ilgili parçalarıyla ilişkilendiren bir JSON manifest dosyası oluşturulur:
{
'/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',
},
],
}
Bu manifest dosyası iki şekilde istenebilir:
- URL ile (ör.
https://site_url/rmanifest.json
). - Pencere nesnesi aracılığıyla
window.__rmanifest
konumunda.
Görünüm alanı içindeki rotalar için parçaları önceden getirme
Manifest dosyası hazır olduğunda, sonraki adım npm install quicklink
komutunu çalıştırarak Quicklink'i yüklemektir.
Ardından, bağlantı görünüme geldiğinde belirli bir rotanın önceden getirileceğini belirtmek için üst düzey bileşen (HOC) withQuicklink()
kullanılabilir.
Aşağıdaki kod, dört bağlantı içeren bir üst menü oluşturan React uygulamasının App
bileşenine aittir:
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>
);
Quicklink'e bu rotaların görünüme geldikçe önceden getirilmesini söylemek için:
- Bileşenin başına
quicklink
HOC'yi içe aktarın. - Her rotayı
withQuicklink()
HOC ile sarmalayın, sayfa bileşenini ve seçenekler parametresini ona iletin.
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, ilişkili parçalarını rmanifest.json
'dan almak için yolun yolunu anahtar olarak kullanır.
Bağlantılar görüntüye geldikçe kitaplık, ön beslenebilecekleri için her bir parça için sayfaya bir <link rel="prefetch">
etiketi yerleştirir.
Önceden getirilen kaynaklar, tarayıcı tarafından en düşük öncelikte istenir ve 5 dakika boyunca HTTP önbelleği içinde tutulur. Bu sürenin ardından kaynağın cache-control
kuralları geçerli olur.
Bunun sonucunda, bir kullanıcı bir bağlantıyı tıklayıp belirli bir yola gittiğinde parçalar önbellekten alınır ve bu yolun oluşturulması için gereken süre önemli ölçüde kısalır.
Sonuç
Önceden getirme, gelecekteki gezinmelerin yükleme sürelerini büyük ölçüde artırabilir. React tek sayfalık uygulamalarında bu, kullanıcı ilgili sayfaya ulaşmadan önce her rotayla ilişkili parçaları yükleyerek yapılabilir.
Quicklink'in React SPA çözümü, bir bağlantı görünüme geldiğinde hangi dosyaların önceden yükleneceğini belirlemek için webpack-route-manifest
kullanarak rota ve parça haritası oluşturur.
Bu tekniği siteniz genelinde uygulamak, gezinme deneyimini anında görünecek kadar iyileştirmeye yardımcı olabilir.