Angular 9 Lazy Loading Nedir? Nasıl Çalışır?
Herkese Merhaba,
Önceki yazımda Angular’da routing mekanizmasına detaylı bir şekilde değinmiştik. Bu yazımda ise Lazy Loading’e değiniyor olacağız. Hazırsak başlayalım.
Öncelikle Angular’da modül ne demek buna değinmek istiyorum. Modüller uygulamamız ile ilgili componentleri, directive’leri, pipe’ları ve servisleri gruplayabildiğimiz yapılardır. Modülleri daha iyi anlamak için bu yapıları sınıflara benzetebiliriz. Sınıf içinde değişkenler veya metodlar mevcuttur. Bunları public veya private belirterek dışarıya açılıp açılmayacağına karar verebiliriz. Ve bu şekilde sınıf içindeki öğelerin diğer sınıflar tarafından kullanılabilir olup olmamasını belirleriz. Aynı durum modüller için de mevcuttur. Bir modül componentleri, directive’leri,pipe’ları veya servisleri dışarıya kullanıma açabilir. Dışa aktarılan öğeler diğer modüller tarafından kullanılabilir ve dışa aktarılmayanlar ise yalnızca modülün içinde kullanılır ve uygulamamızın diğer modülleri tarafından doğrudan erişilemez. Bu bağlamda Angular’da uygulama geliştirirken bir çok modülü import ve export etmemiz gerekecektir. Örnek vermek gerekirse, uygulama geliştirirken problemin boyutuna ve ihtiyacımıza göre nasıl problemi sınıflara bölüyor ve parçalıyorsak , bir Angular uygulaması geliştirirken de uygulamayı modüllere ayırabiliriz. Fakat sayfada yer almayan bir öğeye ait modülün ihtiyaç duyulmadığı takdirde çağrılmasını istemeyiz. Bu performans açısından sorun teşkil edeecektir. Lazy Loading, nesne örneğinin gerçekten ihtiyaç duyulacağı ana kadar alınmaması ve bekletilmesi amacıyla kullanılır. Diğer bir deyişle, “Lazy Loading”, bir modülü ayrı bir Javascript dosyasına bölüp, ona ihtiyaç duyulmadığı sürece indirilmeyeceği şekilde kurgulamaktır. Böylece uygulamanın ilk açılış süresi azaltılıp, gereksiz ağ trafiğinin önüne geçilebilmektedir.
Şimdi bir örnek üzerinden kısaca konuya değinelim. Basit web sitemiz olsun olsun. Bu web sitesinde “Home” ,”Products Analysis” ve “Contact” sayfaları olsun. Ana odağımız olan “Products Analysis” sayfasında ürünlerin satış bilgileri grafiksel olarak bizlere gösterilsin. Biz bu grafiksel gösterim için “Highcharts” kütüphanesini kullanacağız. Yavaş yavaş olayın içine adım atalım.
Not :Birlikte olayı anlamak adına “Angular 9 Routing Mekanizması Nedir? Nasıl Çalışır?” adlı yazıda yaptığım gibi bir menü üzerinden konuyu anlatacağım. Fakat projenin nasıl oluşturulup gerekli kütüphanelerin nasıl yüklendiğini veya component ve modüllerin nasıl oluşturulduğunu anlatmayacağım. Çünkü bunlara bahsettiğim yazıda detaylıca değindiğimi düşünüyorum.
Not : “Highcharts” ‘ı yüklemek için “npm i highcharts-angular highcharts” CLI’da çalıştırın.
Uygulamamızın genel görünümü aşağıdaki şekilde olacaktır:
Şimdi elimizde üç component var. Bunlar “Home”, “Products” ve “Contact” componentleri. Önce “Lazy Loading” olmadan tasarımımızı yapıyoruz. Hızlıca routing işlemlerine başlıyalım.
app.routing.module.ts dosyası:
const routes: Routes = [
{path:"home",component:HomeComponent},{path:"products",component:ProductsComponent},{path:"contact",component:ContactComponent}
];@NgModule({imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]})export class AppRoutingModule { }
app.module.ts dosyası:
@NgModule({
declarations: [
AppComponent,
HomeComponent,
ProductsComponent,
ContactComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HighchartsChartModule, //Grafiksel gösterim için yüklenen modül
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.module.ts dosyasında “HighchartsChartModule” ’ ü sadece “Product componenti “ yani sadece “Product Analysis” sayfasında kullanıcaktır. Fakat burada “Lazy Loading” söz konusu olmadığından dolayı hangi sayfaya gidersek gidelim “HighchartsChartModule” modülü yüklenecektir. Gerçek uygulamalarda bunun gibi yüzlerce modül olduğunu düşünürsek bu olayın gerçekten ne kadar performansa etkisini olduğunu tahmin etmek pek zor olmayacaktır.
Şimdi aynı uygulamayı “Lazy Loading” ile yapalım:
“Products Analysis” sayfasını ayrı bir modül olarak tasarlıyarak gerekli “Highcharts” modülünüde yeni oluşturulan bu modülde import edeceğiz.
CLI’da “ng g m product” diyerek yeni modülümüzü oluşturuyoruz. Bu modülün içeriği aşağıdaki şekilde olacaktır:
const routes: Routes = [{path:"",component:ProductsComponent},];
@NgModule({
declarations: [ProductsComponent],imports: [
CommonModule,
HighchartsChartModule,
RouterModule.forChild(routes)
]
})export class ProductsModule { }
Görüldüğü üzere highcharts modülü artık sadece kullanılacağı modüle eklenmiştir.
Ek olarak routing tanımlamasını aşağıdaki şekilde değiştireceğiz:
yeni app.routing.module.ts dosyası:
const routes: Routes = [
{path:"home",component:HomeComponent},{path:"products",loadChildren:()=>import("./products/products.module").then(x=>x.ProductsModule)},{path:"contact",component:ContactComponent}
];@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})export class AppRoutingModule { }
Burada bir url geldiğinde direk olarak “product component” ’e gitmek yerine önce ”product module” ‘ e gidilecek ve bu modül içinde tanımlanan öğeler import edilecektir.
Bu işlemleri yaptıkdan sonra “Product Component” “app.module.ts” ‘den kaldırılmalıdır. Aksi takdirde iki ayrı yerde tanımı geçtiğinden hata verecektir.
yeni app.module.ts dosyası:
@NgModule({declarations: [AppComponent,
HomeComponent,
ContactComponent,],imports: [
BrowserModule,
AppRoutingModule,
],providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Şimdi inspector penceresinden değişiklikleri inceliyelim:
Lazy Loading Olmadan Önce:
Menü üzerinde bulunan herhangi bir yere yönlendiğimizde aşağıdaki javascript dosyaları yükleniyor.
Lazy Loadingden Sonra:
Menü üzerinde ”Products Analysis” ‘a tıklayıp yönlendiğimizde aşağıdaki javascript dosyaları yükleniyor. Aşağıdaki resimde kırmızı ile kutu içerisine aldığım javascript dosyası bizim “lazy loading” ile yüklenen “product modülümüz” ‘dür. Yani sadece bu sayfaya geldiğimizde yüklenen modülümüzdür.
Uzun lafın kısası uygulamamızı modüllere ayırmak ve “Lazy Loading” kullanmak uygulamanın yüklenme süresini ve buna bağlı olarak performansını arttırmada bize çok yardımcı olmaktadır.
Eğer gözümden kaçan yazım hatası veya anlatım bozukluğu olduysa şimdiden kusuruma bakmayın. Yazım umarım faydalı olmuştur. Okuduğunuz için şimdiden teşekkür ederim. Bir sonraki yazıda görüşmek üzere!
