Angular'da rota önceden yükleme stratejileri

Kullanıcıların daha hızlı çalışmasını sağlamak için rotaları önceden yükleyin yardımcı olabilir.

Minko Gechev

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

Bu teknik ilk sayfa yükleme için harika olsa da, kullanıcıların isteklerine ve ağ gecikmesi ve bant genişliği. Bu sorunu çözmenin bir yolu, rota önceden yüklemesidir. Önceden yükleme yöntemini kullanarak kullanıcı belirli bir rotadaysa daha sonra ihtiyaç duyulması muhtemel rotalarla ilişkili JavaScript'i indirip önbelleğe alabilirsiniz. Angular yönlendirici, bu işlevi kullanıma hazır bir şekilde sağlar.

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 önceden yükleme stratejilerini rota oluşturma

Angular yönlendirici, preloadingStrategy adında bir yapılandırma özelliği sağlar. Bu özellik, geç yüklenen Angular modüllerini önceden yükleme ve işleme mantığını tanımlar. İki olası stratejiyi ele alacağız:

  • 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 kodunu GitHub'da bulabilirsiniz.

PreloadAllModules stratejisi kullanılıyor

Örnek uygulamada birkaç geç yüklenen rota var. Angular'da yerleşik olan PreloadAllModules stratejisini kullanarak tümünü önceden yüklemek için bunu yönlendirici yapılandırmasında preloadingStrategy özelliğinin değeri olarak belirtin:

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

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

Şimdi uygulamayı sunun 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örmeniz gerekir:

PreloadAllModules stratejisi iş başında.

Yönlendirici ayrıca modüllerin rota beyanlarını sağlayarak, önceden yüklenmiş modüllerden herhangi biriyle ilişkili bir URL'ye gittiğinizde, geçişin anlık olmasını sağlamanız gerekir.

PreloadAllModules birçok durumda faydalıdır. Ancak onlarca modülünüz olduğunda agresif önceden yükleme işlemi ağ kullanımını gerçekten artırabilir. Ayrıca, yönlendiricinin önceden yüklenmiş tüm modüllerdeki rotaları kaydetmesi gerektiğinden, kullanıcı arayüzü iş parçacığında yoğun hesaplamalara neden olabilir ve kullanıcı deneyiminin yavaşlamasına neden olabilir.

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

ngx-quicklink paketini kullanarak bir Angular uygulamasına hızlı bağlantı ekleyebilirsiniz. Paketi npm'den 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 {}

Şimdi uygulamayı tekrar açtığınızda, sayfanın ortasındaki düğmede bir yönlendirici bağlantısı olduğundan yönlendiricinin yalnızca nyan-nyan-module.js ürününü önceden yüklediğini fark edeceksiniz. Yan gezinme panelini açtığınızda, yönlendiricinin "Hakkında" bölümünü önceden yüklediğini göreceksiniz. rota:

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

Yukarıdaki örnek temel bir uygulama için çalışacaktır ancak uygulamanız birden fazla geç yüklenen modül içeriyorsa QuicklinkModule öğesini paylaşılan bir modüle aktarmanız, dışa aktarmanız ve daha sonra paylaşılan modülü geç yüklenen modüllerinize içe aktarmanız gerekir.

Öncelikle QuicklinkModule öğesini ngx-quicklink ürününden 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 geç yüklenen modüllerinize aktarın:

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

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

Quicklinks artık geç yüklenen modüllerinizde kullanılabilecek.

Temel önceden yüklemenin ötesine geçme

Hızlı bağlantı aracılığıyla seçmeli önceden yükleme gezinmeyi önemli ölçüde hızlandırabilir ancak Guess.js tarafından uygulanan tahmine dayalı önceden yüklemeyi kullanarak önceden yükleme stratejinizi daha da ağ verimli hale getirebilirsiniz. Guess.js, Google Analytics veya başka bir analiz sağlayıcısından 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 sitesindeki bu sayfada, Angular ile Guess.js'yi nasıl kullanacağınızı öğ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 önceden yükleme stratejisini seçin:
    • Birkaç modül içeren uygulamalar, Angular'ın yerleşik PreloadAllModules stratejisini kullanabilir.
    • Çok sayıda modülü olan uygulamalar, Guess.js'de uygulandığı şekliyle Angular hızlı bağlantısı veya tahmine dayalı önceden yükleme gibi özel bir önceden yükleme stratejisi kullanmalıdır.
  2. Angular yönlendiricinin preloadStrategy özelliğini ayarlayarak önceden yükleme stratejisini yapılandırın.