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, Angular uygulamasında rota düzeyinde kod bölme işleminin nasıl ayarlanacağı açıklanmaktadır. Bu işlem, JavaScript paket boyutunu küçültebilir ve Etkileşime Hazır Olma Süresi'ni önemli ölçüde iyileştirebilir.

Bu makaledeki kod örneklerini GitHub'da bulabilirsiniz. İstekli yönlendirme örneği eager dalında mevcuttur. Rota düzeyinde kod bölme örneği lazy dalında yer alır.

Kod bölmenin önemi

Web uygulamalarının giderek daha karmaşık hale gelmesi, kullanıcılara gönderilen JavaScript miktarında önemli bir artışa neden oldu. Büyük JavaScript dosyaları, etkileşimi belirgin ş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 özelliğini kullanmaktır.

Kod bölme, uygulamanızın JavaScript'ini farklı rotalar veya özelliklerle ilişkili birden fazla parçaya bölmenize olanak tanır. Bu yaklaşım, kullanıcılara yalnızca ilk uygulama yüklemesi sırasında ihtiyaç duydukları JavaScript'i göndererek yükleme sürelerini kısa 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 geç yükleme yaparsınız.
  • Rota düzeyinde kod bölme işleminde, her rotanın işlevini ayrı bir parçaya kapsülleyebilirsiniz. Kullanıcılar uygulamanızda gezinirken her bir rotayla ilişkili parçaları getirir ve ihtiyaç duyduklarında ilgili işlevleri kullanır.

Bu yayında, Angular'da rota düzeyinde bölme işleminin nasıl ayarlanacağı açıklanmaktadır.

Örnek uygulama

Angular'da rota düzeyinde kod bölme özelliğinin nasıl kullanılacağını incelemeden önce örnek bir uygulamaya bakalım:

Uygulama modüllerinin nasıl uygulandığına göz atın. AppModule içinde iki rota tanımlanır: HomeComponent ile ilişkili varsayılan rota ve NyanComponent ile ilişkili 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ölmeyi ayarlamak için nyan istekli rotanın yeniden düzenlenmesi gerekir.

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

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

Bu işlem şunları oluşturur: - NyanModule adlı yeni bir yönlendirme modülü - AppModule içinde nyan adlı bir rota (NyanModule modülünü dinamik olarak yükler) - 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 işlemini 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 rota düzeyinde kod bölme özelliğini kullanmak için rota bildiriminin loadChildren özelliğini ayarlayın ve bunu dinamik bir içe aktarma işlemiyle birleştirin:

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

İstekli rotadan iki önemli farkı vardır:

  1. component yerine loadChildren değerini ayarladınız. Rota düzeyinde kod bölme kullanırken bileşenler yerine dinamik olarak yüklenen modülleri belirtmeniz gerekir.
  2. loadChildren dilinde, promise çözümlendikten sonra NyanComponent öğesine işaret etmek yerine NyanModule döndürürsünüz.

Yukarıdaki snippet, kullanıcı nyan adresine gittiğinde Angular'ın nyan dizininden nyan.module öğesini 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 şu bildirimi 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 sayfasına gittiğinde NyanComponent reklamını oluşturur.

Angular yönlendiricinin yerel ortamınızda nyan.module öğesini geç yüklediğini kontrol etmek için:

  1. Geliştirici Araçları'nı açmak için `Ctrl+Üst Karakter+J` (veya Mac'te `Command+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ölme ile JavaScript paketlerinin geç yüklenmesi

Bu örneği GitHub'da bulabilirsiniz.

Dönen simge gösterme

Şu anda kullanıcı NYAN düğmesini tıkladığında uygulama, arka planda JavaScript yüklediğini belirtmiyor. Komut dosyası yüklenirken kullanıcıya geri bildirim vermek için muhtemelen bir yükleme simgesi eklemek istersiniz.

Bunu yapmak için app.component.html içindeki router-outlet öğesine 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 işareti 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önen simgeyi çalışırken görebilmeniz için yapay bir 500 ms gecikme ekledik.

Sonuç

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

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