Angular'da rota önceden yükleme stratejileri

Kullanıcıların gezinme hızını artırmak için rotaları önceden yükleyin.

Minko Gechev

Rota düzeyinde kod bölme, başlangıçta ihtiyaç duyulmayan rotalarla ilişkili JavaScript'i geciktirerek bir uygulamanın ilk yükleme süresini azaltmanıza yardımcı olabilir. Bu sayede Angular yönlendirici, ilişkili JavaScript'i indirmek için bir ağ isteği tetiklemeden önce kullanıcının belirli bir yola gittiğini bekler.

Bu teknik ilk sayfa yükleme için harika olsa da, kullanıcının ağ gecikmesine ve bant genişliğine bağlı olarak gezinmeyi yavaşlatabilir. Bu sorunun üstesinden gelmenin bir yolu rotayı önceden yüklemektir. Önceden yükleme yöntemini kullanarak kullanıcı belirli bir rotada olduğunda, daha sonra ihtiyaç duyulması muhtemel rotalarla ilişkili JavaScript'i indirip önbelleğe alabilirsiniz. Angular yönlendirici bu işlevi kullanıma hazır olarak sunar.

Bu gönderide, rota düzeyinde kod bölme kullanırken Angular'da JavaScript önceden yükleme özelliğinden yararlanarak gezinmeyi nasıl hızlandıracağınızı öğreneceksiniz.

Angular'da rota ön yükleme stratejileri

Angular yönlendirici, preloadingStrategy adlı bir yapılandırma özelliği sağlar. Bu özellik, yavaş yüklenmiş Angular modüllerini önceden yükleme ve işleme mantığını tanımlar. İki olası stratejiden bahsedeceğiz:

  • Adından da anlaşılacağı gibi, geç yüklenen tüm rotaları önceden yükleyen PreloadAllModules
  • QuicklinkStrategy, yalnızca geçerli sayfadaki bağlantılarla ilişkili rotaları önceden yükler.

Bu yayının geri kalanında örnek bir Angular uygulaması ele alınmaktadır. Kaynak kodu GitHub'da bulabilirsiniz.

PreloadAllModules stratejisini kullanma

Örnek uygulamada birkaç ertelenen yükleme yolu vardır. Bunların tümünü Angular'a yerleştirilmiş PreloadAllModules stratejisini kullanarak önceden yüklemek için yönlendirici yapılandırmasında preloadingStrategy özelliğinin değeri olarak belirtin:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Ardından uygulamayı yayınlayın ve Chrome Geliştirici Araçları'ndaki Ağ paneline bakın:

  1. Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Ağ sekmesini tıklayın.

Uygulamayı açtığınızda yönlendiricinin arka planda nyan-nyan-module.js ve about-about-module.js dosyalarını indirdiğini görürsünüz:

PreloadAllModules stratejisinin işleyiş şekli.

Yönlendirici, önceden yüklenmiş modüllerden herhangi biriyle ilişkili bir URL'ye gittiğinizde geçişin anında gerçekleşmesi için modüllerin rota beyanlarını da kaydetti.

PreloadAllModules birçok durumda faydalıdır. Ancak düzinelerce modülünüz varsa agresif ön yükleme özelliği ağ kullanımını gerçekten artırabilir. Ayrıca, yönlendiricinin rotaları önceden yüklenmiş tüm modüllere kaydetmesi gerektiğinden, kullanıcı arayüzü iş parçacığında yoğun hesaplamalara neden olabilir ve yavaş bir kullanıcı deneyimine yol açabilir.

Hızlı bağlantı kitaplığı, daha büyük uygulamalar için daha iyi bir strateji sağlar. Yalnızca sayfadaki mevcut bağlantılarla ilişkili modülleri önceden yüklemek için IntersectionObserver API'sini kullanır.

ngx-quicklink paketini kullanarak Angular uygulamasına hızlı bağlantı ekleyebilirsiniz. Paketi npm üzerinden yükleyerek başlayın:

npm install --save ngx-quicklink

Projenizde kullanılabilir hale geldiğinde QuicklinkStrategy yönlendiricinin preloadingStrategy değerini belirtip QuicklinkModule öğesini içe aktararak kullanabilirsiniz:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Uygulamayı tekrar açtığınızda, sayfanın ortasındaki düğmede yönlendirici bağlantısı bulunduğundan yönlendiricinin yalnızca nyan-nyan-module.js'ü önceden yüklediğini fark edeceksiniz. Yan gezinme panelini açtığınızda, yönlendiricinin "Hakkında" rotasını önceden yüklediğini görürsünüz:

Hızlı bağlantıyı önceden yükleme stratejisinin bir demosu.

Yukarıdaki örnek temel bir uygulama için işe yarar ancak uygulamanız birden fazla yavaş yüklenmiş modül içeriyorsa QuicklinkModule dosyasını paylaşılan bir modüle içe aktarmanız, dışa aktarmanız ve ardından paylaşılan modülü yavaş yüklenmiş modüllerinize içe aktarmanız gerekir.

Öncelikle QuicklinkModule öğesini ngx-quicklink'ten paylaşılan modülünüze aktarın ve dışa aktarın:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Ardından SharedModule öğenizi tüm yavaş yüklenmiş modüllerinize aktarın:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks artık yavaş yüklenmiş modüllerinizde kullanılabilir.

Temel önceden yüklemenin ötesine geçme

Hızlı bağlantı üzerinden seçmeli önceden yükleme, gezinmeyi önemli ölçüde hızlandırabilir. Ancak Guess.js tarafından uygulanan tahmini önceden yükleme özelliğini kullanarak önceden yükleme stratejinizi ağ açısından daha da verimli hale getirebilirsiniz. Guess.js, Google Analytics veya başka bir analiz sağlayıcıdan gelen bir raporu analiz ederek kullanıcının gezinme yolculuğunu tahmin edebilir ve yalnızca bir sonraki adımda ihtiyaç duyulması muhtemel JavaScript parçalarını önceden yükleyebilir.

Guess.js'yi Angular ile nasıl kullanacağınızı Guess.js sitesindeki bu sayfada öğrenebilirsiniz.

Sonuç

Rota düzeyinde kod bölme kullanırken navigasyonu hızlandırmak için:

  1. Uygulamanızın boyutuna bağlı olarak doğru ön yükleme stratejisini seçin:
    • Birkaç modül içeren uygulamalar, Angular'ın yerleşik PreloadAllModules stratejisini kullanabilir.
    • Birçok modülü olan uygulamalarda, Angular'ın hızlı bağlantısı gibi özel bir ön yükleme stratejisi veya Guess.js'de uygulandığı gibi tahmini ön yükleme kullanılmalıdır.
  2. Angular yönlendiricinin preloadStrategy mülkünü ayarlayarak ön yükleme stratejisini yapılandırın.