Quicklink ile React'ta gezinmeyi hızlandırın

React tek sayfalı uygulamalar için hızlı bağlantıyla görüntü alanı içi bağlantıları otomatik olarak önceden getirme.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Ö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, kullanıcı bu bağlantıları tıkladığında HTTP önbelleğinden alınabilmeleri için görüntü alanı içindeki bağlantılar için belgeleri (ör. /article.html) önceden getirir.

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) gitmeden ö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şturur:

{
  '/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:

1. Bileşenin başına quicklink HOC'yi içe aktarın.
2. 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ünüme 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.