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

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Önceden getirme, bir sonraki sayfanın kaynaklarını önceden indirerek gezinmeleri hızlandırmak için kullanılan bir tekniktir. Quicklink, görünüme gelen bağlantıları otomatik olarak önceden getirerek bu tekniği geniş ölçekte uygulamanıza olanak tanıyan bir kitaplıktır.

Çok sayfalı uygulamalarda kitaplık, görünüm içi bağlantılar için dokümanları (ör./article.html) önceden getirir. Böylece, kullanıcı bu bağlantıları tıkladığında bu belgeler HTTP önbelleğinden alınabilir.

Tek sayfalık uygulamalarda genellikle yönlendirmeye dayalı kod bölme adı verilen bir teknik kullanılır. Bu, sitenin belirli bir rota için kodu yalnızca kullanıcı ilgili yere gittiğinde yüklemesine olanak tanır. Bu dosyalar (JS, CSS) genellikle "parçalar" olarak adlandırılır.

Bununla birlikte, bu sitelerde, dokümanları önceden getirmek yerine, en büyük performans kazancı, sayfa ihtiyaç duymadan bu parçaların önceden getirilmesidir.

Bunu başarmak bazı zorlukları beraberinde getiriyor:

• Belirli bir rotayla (ör. /article) hangi parçaların (ör. article.chunk.js) ilişkili olduğunu belirli bir rotaya inmeden önce belirlemek önemli 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ık uygulamalarda geniş ölçekte önceden getirme işlemi gerçekleştirmenize nasıl olanak tanıdığı açıklanmaktadır.

Her bir güzergâh ile ilişkili parçaları belirleme

quicklink öğesinin temel bileşenlerinden biri, rotaları ve parçaları içeren bir JSON sözlüğü oluşturmanıza olanak tanıyan bir webpack eklentisi olan webpack-route-manifest'tir. Bu, kitaplığın, uygulamanın her yolu için hangi dosyalara ihtiyaç duyacağını bilmesine ve rotalar görünüme geldiğinde bu dosyaları önceden getirmesine olanak tanır.

Eklenti projeyle entegre edildikten sonra her yolu karşılık gelen parçalarla ilişkilendiren bir JSON manifest dosyası üretir:

{
  '/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 nesnesinden, window.__rmanifest konumunda.

Görüntü içi rotalar için parçaları önceden getir

Manifest dosyası kullanılabilir 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 getirilmesi gerektiğini belirtmek için yüksek düzey bileşeni (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>
);

Bu rotaların görünüme girerken önceden getirilmesi gerektiğini Quicklink'e bildirmek için:

1. Bileşenin başında quicklink HOC'yi içe aktarın.
2. Her bir rotayı withQuicklink() HOC ile sarmalayarak sayfa bileşenini ve seçenekler parametresini kendisine 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, rmanifest.json kaynağından ilişkili parçalarını elde etmek için rotanın yolunu anahtar olarak kullanır. Gelişmiş seçeneklerde, bağlantılar görünüme girdikçe kitaplık, önceden getirilebilmesi için her parça için sayfaya bir <link rel="prefetch"> etiketi ekler. Önceden getirilen kaynaklar, tarayıcı tarafından en düşük öncelikte istenir ve HTTP Önbelleği'nde 5 dakika boyunca tutulur. Bu sürenin sonunda, kaynağın cache-control kuralları uygulanır. Bunun sonucunda, kullanıcı bir bağlantıyı tıklayıp belirli bir rotaya gittiğinde, parçalar önbellekten alınır ve bu şekilde, rotanın oluşturulması için gereken süre büyük ölçüde artar.

Sonuç

Önceden getirme, gelecekteki gezinmeler için yükleme sürelerini büyük ölçüde iyileştirebilir. React tek sayfalık uygulamalarda bu işlem, her rotayla ilişkili parçaları kullanıcı hedefe ulaşmadan önce yükleyerek gerçekleştirilebilir. Quicklink'in React SPA için sunduğu çözüm, görünüme bir bağlantı geldiğinde hangi dosyaların önceden getirileceğini belirlemek üzere rotaların ve parçaların haritasını oluşturmak için webpack-route-manifest yöntemini kullanır. Bu tekniği sitenizin genelinde uygulamak, gezinmeleri anında görünecek şekilde önemli ölçüde iyileştirebilir.