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

Angular'da rota düzeyinde kod bölme

Rota düzeyinde kod bölme özelliğini kullanarak uygulamanızın performansını iyileştirin.

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. Eager yönlendirme örneği, eager dalında mevcuttur. Rota düzeyinde kod bölme örneği geç dalda yer alır.

Kod bölme neden önemlidir?

Web uygulamalarının giderek daha karmaşık hale gelmesi, kullanıcılara gönderilen JavaScript kodlarında önemli bir artışa neden olmuştur. Büyük JavaScript dosyaları, etkileşimi önemli ölçüde 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ı rotalar veya özelliklerle ilişkili birden fazla parçaya bölmenize 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 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 gerektiğinde bunları geç yüklersiniz.
Rota düzeyinde kod bölmede, her rotanın işlevselliğini ayrı bir parçaya toplarsınız. Kullanıcılar uygulamanızda gezindiğinde, her bir rotayla ilişkili parçaları getirir ve ihtiyaç duyduklarında ilgili işlevleri elde ederler.

Bu yayın, Angular'da rota düzeyinde bölme işlemini ayarlamaya odaklanmaktadı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üllerini uygulama adımlarını inceleyin. AppModule içinde iki rota tanımlanmıştır: HomeComponent ile ilişkili varsayılan rota ve NyanComponent ile ilişkili bir 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 eager rotasının yeniden düzenlenmesi gerekiyor.

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 şunları oluşturur: - NyanModule adında yeni bir yönlendirme modülü - AppModule bölgesinde bulunan ve NyanModule öğesini dinamik olarak yükleyecek nyan adlı 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 işlemini uygulamayı daha iyi anlayabilmemiz için bu adımları manuel olarak ele alalım.

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

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

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

Eager rota ile arasında iki önemli fark vardır:

component yerine loadChildren ayarladınız. Rota düzeyinde kod bölme kullanırken bileşenler yerine dinamik olarak yüklenen modüllere yönlendirmeniz gerekir.
loadChildren ürününde, taahhüt gerçekleştirildikten sonra NyanComponent öğesine işaret etmek yerine NyanModule öğesini döndürürsünüz.

Yukarıdaki snippet, kullanıcı nyan ürününe gittiğinde Angular'ın nyan dizininden dinamik olarak nyan.module öğesini yüklemesi ve modülde açıklanan varsayılan rotayla ilişkili bileşeni oluşturması gerektiğini belirtir.

Aşağıdaki bildirimi kullanarak varsayılan rotayı 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 adresine 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+Üst Karakter+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ündüğünü unutmayın.

GitHub'da bu örneği bulun.

Çark göster

Şu anda kullanıcı NYAN düğmesini tıkladığında uygulama arka planda JavaScript yüklediğini göstermiyor. 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 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, RouteConfigLoadEnd etkinliğini duyduğunda ise 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 ekledik.

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 oluşturmak için Angular KSA geç yüklenen modül oluşturma aracını kullanın.
Kullanıcı devam eden bir işlem olduğunu göstermek için geç bir rotaya gittiğinde yükleme göstergesi ekleyin.