Angular'da rota önceden yükleme stratejileri

Kullanıcıların gezinmesini hızlandı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 şekilde, Angular yönlendirici, kullanıcı ilişkili JavaScript'i indirmek için bir ağ isteğini tetiklemeden önce belirli bir yola gidene kadar bekler.

Bu teknik ilk sayfa yüklemesi için ideal olsa da, kullanıcıların ağ gecikmesine ve bant genişliğine bağlı olarak gezinmeyi yavaşlatabilir. Bu sorunu çözmenin bir yolu rota önceden yüklemedir. Önceden yüklemeyi kullanarak, kullanıcı belirli bir rotadayken, 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 yayında, Angular'da JavaScript önceden yükleme özelliğinden yararlanarak rota düzeyinde kod bölmeyi kullanırken gezinmeyi nasıl hızlandıracağınızı öğreneceksiniz.

Angular'da rota önceden yükleme stratejileri

Angular yönlendirici, preloadingStrategy adında bir yapılandırma özelliği sağlar. Bu özellik, geç yüklenen Angular modüllerinin önceden yüklenmesi ve işlenmesiyle ilgili mantığı 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ı, örnek bir Angular uygulamasıyla ilgilidir. Kaynak kodunu GitHub'da bulabilirsiniz.

PreloadAllModules stratejisini kullanma

Örnek uygulamada geç yüklenen birkaç rota vardır. Angular'da yerleşik olan PreloadAllModules stratejisini kullanarak tümünü önceden yüklemek için yönlendirici yapılandırmasındaki 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ı'nda Ağ paneline bakın:

1. Geliştirici Araçları'nı açmak için "Control+Shift+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 uygulamalarını indirdiğini göreceksiniz:

Yönlendirici, önceden yüklenmiş modüllerin herhangi biriyle ilişkili bir URL'ye gittiğinizde geçişin anında gerçekleşebilmesi için modüllerin rota bildirimlerini de kaydeder.

Quicklink önceden yükleme stratejisini kullanma

PreloadAllModules birçok durumda yararlıdır. Ancak, onlarca modüle sahipseniz, agresif önceden yükleme işlemi 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 ve yavaş bir kullanıcı deneyimine yol açabilir.

Hızlı bağlantı kitaplığı büyük uygulamalar için daha iyi bir strateji sağlar. Yalnızca sayfada görünen 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. npm'den paketi yükleyerek başlayın:

npm install --save ngx-quicklink

Projenizde kullanılabilir hale geldikten sonra yönlendiricinin preloadingStrategy değerini belirterek ve QuicklinkModule öğesini içe aktararak QuicklinkStrategy kullanabilirsiniz:

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

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

Artık uygulamayı tekrar açtığınızda, sayfanın ortasındaki düğmede kendisine bir yönlendirici bağlantısı bulunduğundan yönlendiricinin yalnızca nyan-nyan-module.js öğesini ö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 görürsünüz:

Quicklink önceden yükleme stratejisini birden fazla geç yüklenen modülde kullanma

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

İlk olarak QuicklinkModule dosyasını ngx-quicklink kaynağından 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, geç yüklenen tüm modüllerinize aktarın:

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

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

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

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. Bununla birlikte, Guess.js tarafından uygulanan tahmine dayalı önceden yüklemeyi kullanarak önceden yükleme stratejinizi daha da verimli hale getirebilirsiniz. Guess.js, Google Analytics'ten 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 daha sonra ihtiyaç duyulabilecek 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 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 içeren uygulamalar, Guess.js'de uygulandığı gibi özel bir önceden yükleme stratejisi (ör. Angular'ın hızlı bağlantısı) veya tahmine dayalı önceden yükleme kullanmalıdır.
2. Angular yönlendiricinin preloadStrategy özelliğini ayarlayarak önceden yükleme stratejisini yapılandırın.