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