Kullanıcıların gezinmesini hızlandırmak için rotaları önceden yükleyin.
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:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- 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:
- 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.
- Birkaç modül içeren uygulamalar Angular'ın yerleşik
- Angular yönlendiricinin
preloadStrategy
özelliğini ayarlayarak önceden yükleme stratejisini yapılandırın.