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

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

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Anton Karlovskiy
X GitHub Nostaljik
Demián Renzulli
Demián Renzulli
X GitHub Nostaljik

Önceden getirme, sonraki sayfanın kaynaklarını önceden indirerek gezinmeleri hızlandırmayı sağlayan bir tekniktir. Quicklink, görünüme giren 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üntü 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 HTTP önbelleğinden alınabilir.

Tek sayfalık uygulamalar genellikle rota tabanlı kod bölme adı verilen bir teknik kullanır. Bu, sitenin belirli bir rotanın kodunu yalnızca kullanıcı söz konusu rotaya gittiğinde yüklemesine izin verir. 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ı, bu parçaları sayfa ihtiyaç duymadan önce önceden getirmektir.

Bunu başarmak bazı zorlukları beraberinde getirir:

  • Belirli bir rotaya (ör. /article) inmeden önce hangi parçaların (örneğin, article.chunk.js) ilişkilendirildiğini belirlemek çok önemlidir.
  • Modern modül paketleyiciler genellikle sürüm oluşturma için uzun vadeli karma oluşturma (ör. article.chunk.46e51.js) kullandığından bu parçaların nihai URL adları tahmin edilemez.

Bu kılavuzda, Quicklink'in bu sorunların nasıl çözüldüğü açıklanmakta ve React tek sayfalık uygulamalarda geniş ölçekte önceden getirme işlemi gerçekleştirebilirsiniz.

Her rotayla ilişkili parçaları belirleyin

quicklink öğesinin temel bileşenlerinden biri, rotalar ve parçalardan JSON sözlüğü oluşturmanıza olanak tanıyan bir web paketi eklentisi olan webpack-route-manifest'tir. Bu, kitaplığın, uygulamanın her rotası için hangi dosyalara ihtiyaç duyulacağını bilmesini ve rotalar görünüme ulaştıkça bunları önceden getirmesini sağlar.

Eklentiyi projeyle entegre ettikten sonra, her bir rotayı karşılık gelen parçalarla 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 nesnesinden, window.__rmanifest konumunda.

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

Manifest dosyası kullanılabilir hale geldikten sonra, bir sonraki adım npm install quicklink aracını çalıştırarak Quicklink'i yüklemektir.

Ardından, bağlantı görünüme girdiğinde belirli bir rotanın önceden getirilmesi gerektiğini belirtmek için yüksek sipariş 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>
);

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

  1. Bileşenin başındaki quicklink HOC'yi içe aktarın.
  2. Her bir rotayı withQuicklink() HOC ile sarmalayın ve 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, rmanifest.json kaynağından ilişkili parçaları almak için rotanın yolunu anahtar olarak kullanır. Gelişmiş seçeneklerde, bağlantılar görünüme geldikçe, kitaplık her bir parçanın önceden getirilebilmesi için sayfaya bir <link rel="prefetch"> etiketi ekler. Önceden getirilen kaynaklar tarayıcı tarafından en düşük öncelikte istenir ve 5 dakika boyunca HTTP Önbelleği'nde tutulur. Bu noktadan sonra 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ıp rotanın oluşturulması için gereken süre büyük ölçüde iyileştirilir.

Sonuç

Önceden getirme, gelecekteki gezinmeler için yükleme sürelerini önemli ölçüde kısaltabilir. Tek sayfalık React uygulamalarında bunu, kullanıcı henüz tamamlamadan her rotayla ilişkili parçaları yükleyerek yapabilirsiniz. Quicklink'in React SPA çözümü, bir bağlantı görünüme girdiğinde hangi dosyaların önceden getirileceğini belirlemek için rotaların ve parçaların bir haritasını oluşturmak üzere webpack-route-manifest özelliğini kullanır. Bu tekniği sitenizde uygulamak, gezinmeleri anında görünmelerini sağlayacak kadar geliştirebilir.