Bu sayfa, Cloud Translation API ile çevrilmiştir.

Angular'da rota düzeyinde kod bölme

Rota düzeyinde kod bölme işlevini kullanarak uygulamanızın performansını iyileştirin.

Minko Gechev

Bu yayında, Angular uygulamasında JavaScript paketi boyutunu küçültüp Etkileşime Hazır Olma Süresi'ni önemli ölçüde iyileştirebilecek rota düzeyinde kod bölme özelliğinin nasıl ayarlanacağı açıklanmaktadır.

Bu makaledeki kod örneklerini GitHub'da bulabilirsiniz. Eager yönlendirme örneği eager dalı'nda mevcuttur. Rota düzeyinde kod bölme örneği lazy dal içindedir.

Kod bölme neden önemlidir?

Web uygulamalarının giderek daha karmaşık hale gelmesi, kullanıcılara gönderilen JavaScript miktarında önemli bir artışa neden olmuştur. Büyük JavaScript dosyaları etkileşimi belirgin ölçüde geciktirebileceğinden ö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 işlemini uygulamaktı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 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ölmede, bileşenleri kendi JavaScript parçalarına taşır ve ihtiyaç duyduklarında geç yükleyebilirsiniz.
Rota düzeyinde kod bölmede, her rotanın işlevselliğini ayrı bir parçaya dahil edersiniz. Kullanıcılar uygulamanızda gezinirken, her bir rotayla ilişkili parçaları ve ihtiyaç duydukları anda ilgili işlevleri alır.

Bu yayın, Angular'da rota düzeyinde bölme işlevini ayarlamaya odaklanmaktadır.

Örnek uygulama

Angular'da rota düzeyinde kod bölmenin nasıl kullanıldığını öğrenmeden önce örnek bir uygulamaya göz atalım:

Uygulamanın modüllerinin nasıl uygulandığını kontrol edin. AppModule içinde iki rota tanımlanmıştır: HomeComponent ile ilişkilendirilmiş varsayılan rota ve NyanComponent ile ilişkilendirilmiş nyan rota:

@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 rotasının yeniden düzenlenmesi gerekiyor.

Angular KSA'nın 8.1.0 sürümü, şu komutla sizin için tüm işlemleri 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 bölgesinde, NyanModule politikasını dinamik olarak yükleyecek nyan adında bir rota - NyanModule içinde varsayılan 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 anlayabilmemiz için bu adımların üzerinden manuel olarak geçelim.

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

Angular'da rota düzeyinde kod bölmeyi kullanmak için rota bildiriminin loadChildren özelliğini ayarlayın ve dinamik içe aktarmayla birleştirin:

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

İstekli rotadan iki önemli fark vardır:

component yerine loadChildren ayarladınız. Rota düzeyinde kod bölme işlevini kullanırken, bileşenler yerine dinamik olarak yüklenen modüllere yönlendirmeniz gerekir.
loadChildren ürününde, söz kesinleştikten sonra NyanComponent öğesini işaret etmek yerine NyanModule değerini 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 belirtilen varsayılan rotayla ilişkilendirilmiş bileşeni oluşturması gerektiğini belirtir.

Şu bildirimi kullanarak varsayılan yolu bir bileşenle ilişkilendirebilirsiniz:

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 oluşturur.

Angular yönlendiricinin nyan.module öğesini yerel ortamınızda gecikmeli olarak indirip indirmediğini kontrol etmek için:

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.
Örnek uygulamada NYAN'ı tıklayın.
nyan-nyan-module.js dosyasının ağ sekmesinde görüntüleneceğini unutmayın.

Bu örneği GitHub'da bulabilirsiniz.

Dönen işaret göster

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

Bunu yapmak için app.component.html içindeki 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 bayrağı 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öner simgeyi çalışırken görebilmeniz için 500 ms'lik yapay bir gecikmeyi uygulamaya koyduk.

Sonuç

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

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