Angular'da rota düzeyinde kod bölme

Rota düzeyinde kod bölme özelliğini kullanarak uygulamanızın performansını artırın.

Minko Gechev

Bu yayında, bir Angular uygulamasında rota düzeyinde kod bölmenin nasıl ayarlanacağı açıklanmaktadır. Bu ayar, JavaScript paket boyutunu küçültüp Etkileşime Hazır Olma Süresi'ni büyük ölçüde iyileştirebilir.

Bu makaledeki kod örneklerini GitHub'da bulabilirsiniz. İstendiğinde yönlendirme örneğini istek üzerine dalında bulabilirsiniz. Rota düzeyinde kod bölme örneği tembel dalda yer alır.

Kod bölme neden önemlidir?

Web uygulamalarının giderek artan karmaşıklığı, kullanıcılara gönderilen JavaScript miktarında önemli bir artışa neden oldu. Büyük JavaScript dosyaları etkileşimi belirgin bir şekilde geciktirebilir. Bu nedenle, özellikle mobil cihazlarda maliyetli bir kaynak olabilir.

Uygulamalarınızdaki özelliklerden ödün vermeden JavaScript paketlerini küçültmenin en etkili yolu agresif kod bölme uygulamaktır.

Kod bölme, uygulamanızın JavaScript'ini farklı rotalarla veya özelliklerle ilişkili birden fazla parçaya ayırmanıza olanak tanır. Bu yaklaşım, kullanıcılara yalnızca uygulamanın ilk yüklenmesi sırasında ihtiyaç duydukları JavaScript'i göndererek yükleme sürelerini düşük tutar.

Kod bölme teknikleri

Kod bölme işlemi iki düzeyde yapılabilir: bileşen düzeyi ve rota düzeyi.

  • Bileşen düzeyinde kod bölme işleminde, bileşenleri kendi JavaScript parçalarına taşır ve gerektiğinde bunları yavaşça yüklersiniz.
  • Rota düzeyinde kod bölme işleminde, her rotanın işlevini ayrı bir parçaya sarmalayın. Kullanıcılar uygulamanızda gezinirken her bir rotayla ilişkili parçaları getirir ve ihtiyaç duyduklarında ilişkili işlevi alır.

Bu yazıda, Angular'da rota düzeyinde bölme işleminin ayarlanması ele alınmaktadır.

Örnek uygulama

Angular'da rota düzeyinde kod bölme işleminin nasıl kullanılacağını araştırmadan önce örnek bir uygulamaya bakalım:

Uygulamanın modüllerinin uygulanmasını kontrol edin. AppModule içinde iki rota tanımlanır: HomeComponent ile ilişkili varsayılan rota ve NyanComponent ile ilişkili bir nyan rotası:

@NgModule({
  ...
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent,
        pathMatch: 'full'
      },
      {
        path: 'nyan',
        component: NyanComponent
      }
    ])
  ],
  ...
})
export class AppModule {}

Rota düzeyinde kod bölme

Kod bölme özelliğini ayarlamak için nyan istekli yolunun yeniden yapılandırılması gerekir.

Angular CLI'ın 8.1.0 sürümü, sizin için her şeyi şu komutla yapabilir:

ng g module nyan --module app --route nyan

Bu işlem sonucunda şunlar oluşturulur: - NyanModule adlı yeni bir yönlendirme modülü - AppModule içinde NyanModule adlı ve NyanModule'yi dinamik olarak yükleyen bir rota - NyanModule içinde varsayılan bir rota - Kullanıcı varsayılan rotaya ulaştığında oluşturulacak NyanComponent adlı bir bileşen

Angular ile kod bölme özelliğini uygulamayı daha iyi anlamak için bu adımları manuel olarak uygulayalım.

Kullanıcı nyan rotasına gittiğinde yönlendirici, yönlendirici çıkışında NyanComponent öğesini oluşturur.

Angular'da yol düzeyinde kod bölme özelliğini kullanmak için yol beyanının loadChildren mülkünü ayarlayın ve dinamik bir içe aktarma işlemiyle birleştirin:

{
  path: 'nyan',
  loadChildren: () => import('./nyan/nyan.module').then(m => m.NyanModule)
}

İsteksiz rotayla arasında iki önemli fark vardır:

  1. component yerine loadChildren ayarladıysanız. Rota düzeyinde kod bölme kullanırken bileşenler yerine dinamik olarak yüklenen modüllere yönlendirmeniz gerekir.
  2. loadChildren işlevinde, söz çözüldükten sonra NyanComponent değerini göstermek yerine NyanModule değerini döndürürsünüz.

Yukarıdaki snippet, kullanıcı nyan adresine gittiğinde Angular'ın nyan.module dosyasını nyan dizininden dinamik olarak yüklemesi ve modülde tanımlanan varsayılan rotayla ilişkili bileşeni oluşturması gerektiğini belirtir.

Varsayılan rotayı bir bileşenle ilişkilendirmek için aşağıdaki beyanı kullanabilirsiniz:

import { NgModule } from '@angular/core';
import { NyanComponent } from './nyan.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [NyanComponent],
  imports: [
    RouterModule.forChild([{
      path: '',
      pathMatch: 'full',
      component: NyanComponent
    }])
  ]
})
export class NyanModule {}

Bu kod, kullanıcı https://example.com/nyan adresine gittiğinde NyanComponent oluşturur.

Angular yönlendiricinin nyan.module dosyasını yerel ortamınızda yavaşça indirip indirmediğini kontrol etmek için:

  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.

  3. Örnek uygulamada NYAN'ı tıklayın.

  4. nyan-nyan-module.js dosyasının ağ sekmesinde göründüğünü unutmayın.

Rota düzeyinde kod bölmeyle JavaScript paketlerinin geç yüklenmesi

Bu örneği GitHub'da bulabilirsiniz.

Çark göster

Şu anda kullanıcı NYAN düğmesini tıkladığında uygulama, arka planda JavaScript yüklediğini belirtmiyor. Komut dosyasını yüklerken kullanıcıya geri bildirim vermek için muhtemelen bir döner simge eklemek isteyebilirsiniz.

Bunu yapmak için app.component.html öğesindeki router-outlet öğesinin içine gösterge için işaretleme ekleyerek başlayın:

<router-outlet>
  <span class="loader" *ngIf="loading"></span>
</router-outlet>

Ardından, yönlendirme etkinliklerini işlemek için bir AppComponent sınıfı ekleyin. Bu sınıf, RouteConfigLoadStart etkinliğini duyduğunda loading işaretini true olarak, RouteConfigLoadEnd etkinliğini duyduğunda ise loading işaretini false olarak ayarlar.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loading: boolean;
  constructor(router: Router) {
    this.loading = false;
    router.events.subscribe(
      (event: RouterEvent): void => {
        if (event instanceof NavigationStart) {
          this.loading = true;
        } else if (event instanceof NavigationEnd) {
          this.loading = false;
        }
      }
    );
  }
}

Aşağıdaki örnekte, döndürücünün nasıl çalıştığını görebilmeniz için yapay bir 500 ms gecikmesi ekledik.

Sonuç

Rota düzeyinde kod bölme işlemini uygulayarak Angular uygulamalarınızın paket boyutunu küçültebilirsiniz:

  1. Dinamik olarak yüklenen bir rotayı otomatik olarak iskelet haline getirmek için Angular CLI'nin yavaş yüklenen modül oluşturucusunu kullanın.
  2. Kullanıcı devam eden bir işlem olduğunu göstermek için geç bir rotaya gittiğinde yükleme göstergesi ekleyin.