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şlemi için mükemmel olsa da kullanıcıların ağ gecikmesine ve bant genişliğine bağlı olarak gezinmeyi yavaşlatabilir. Bu sorunun üstesinden gelmenin bir yolu rotayı önceden yüklemektir. Kullanıcı belirli bir rotadayken ön yükleme özelliğini kullanarak, bir sonraki aşamada 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 yayında, Angular'da JavaScript ön yükleme özelliğinden yararlanarak rota düzeyinde kod bölme kullanılırken 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, tüm yavaş yüklenmiş rotaları önceden yükleyen PreloadAllModules
  • QuicklinkStrategy, yalnızca geçerli sayfadaki bağlantılarla ilişkili rotaları önceden yükler.

Bu gönderinin geri kalanı örnek bir Angular uygulamasından bahseder. Kaynak kodunu 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 "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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'den yüklemekle başlayın:

npm install --save ngx-quicklink

Projenizde kullanılabilir hale geldikten sonra, yönlendiricinin preloadingStrategy değerini belirterek ve QuicklinkModule dosyasını içe aktararak QuicklinkStrategy değerini 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 menüsünü açtığınızda yönlendiricinin "Hakkında" rotasını önceden yüklediğini fark edeceksiniz:

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 özelliğini kullanırken gezinmeyi hızlandırmak için:

  1. Uygulamanızın boyutuna bağlı olarak doğru ön yükleme stratejisini seçin:
    • Az sayıda modülü olan 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.