Rota düzeyinde kod bölme işlevini kullanarak uygulamanızın performansını iyileştirin.
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
yerineloadChildren
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 sonraNyanComponent
öğesini işaret etmek yerineNyanModule
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.