Lazy Loading Nedir?

Herkese Merhaba,

Önceki yazımda Closure konusunu detaylı bir şekilde incelemiştik. Bu yazımda ise Lazy Loading’den bahsedeceğiz. “Lazy Loading” bir modülü ayrı Javascript dosyasına bölüp, ihtiyaç olduğunda çağrılmasıdır. İsteğe bağlı olarak modüllerin yüklenme işlemidir örneğin; Js, CSS, video, doküman, resim vb. Bu şekilde, uygulamamızın açılış süresini azaltıp, gereksiz yüklenmeleri yani ağ trafiğinin önüne geçebilmektedir.

Neden Lazy Loading?

Lazy Loading, nesne örneğinin gerçekten ihtiyaç duyulacağı ana kadar alınmaması ve bekletilmesi amacıyla kullanılır. Daha çok büyük projelerde performans sorunun önüne geçilmesi için kullanılmaktadır. Kısaca olarak Böl, Parçala ve Yönet diyebiliriz.

Örnek vermek gerekirse, bir metroda olduğumuzu düşünelim ve bizim gitmek istediğimiz istasyon bu metronun son durağında ve sadece orada inip devam etmemiz lazım ama, her durakta inip kontrol edip ‘’ bu durak değilmiş ‘’ diyerek varış noktamıza kadar bu durumu tekrarladığımızı düşünelim. Bunu yaptığımızda hem ‘’ Vakit ‘’ hem de ‘’Performans’’ açılarından ciddi bir kayıp olduğu ortada. Örneğimizden yola çıkarak her durakta indiğimiz ve kontrol ettiğimiz için hem süremiz hem de performansımızı kaybetmiş olacağız. Lazy Loading’in burada ki öne çıkarışı bizim durak sonuna gideceğimizi bilmemiz ve buna göre hareket ederek bizlere vakit ve performans’tan kazanım sağlıyor. Özetle

Lazy Loading uygulama modüllerimizi, çoklu modüllere bölerek talep üzerine yüklenmesini sağlar.

Angular’da Lazy Loading Nasıl Kullanılır?

İlk olarak Lazy Loading kullanılmadan bir proje oluşturduğumuzda network tarafından js dosyalarının nasıl yüklendiğini görelim.

AppModule dosyamızın kodları aşağıdadır.

const appRoutes: Routes = [
  { path: 'posts', component: PostsComponent },
  { path: 'comments', component: CommentsComponent },
  { path: 'albums', component: AlbumsComponent },
  { path: 'photos', component: PhotosComponent },
  { path: 'todos', component: TodosComponent },
  { path: 'users', component: UsersComponent },
]
@NgModule({
  declarations: [
    AppComponent,
    PostsComponent,
    CommentsComponent,
    AlbumsComponent,
    PhotosComponent,
    TodosComponent,
    UsersComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Şimdi projemizi tarayıcı da açtığımızda console kısmında Network’ü açarak JS modüllerinin yüklenmelerine bakalım.

Evet görmüş olduğumuz üzere, Console’umuz açıkken sayfalar arası geçiş yaptığımızda farklı bir modül yüklenmeyecek çünkü proje açıldığında bütün modüllerimiz otomatik olarak yüklendi. Şimdi ise aynı projemizden devam edip, AppModule dosyamızı birazcık değiştireceğiz ve her bir component için yeni Module dosyalarımızı oluşturacağız ardından, Lazy Loading’e uygun hale getireceğiz…

6 Adet Component’imiz bulunmakta Lazy Loading’e uygun hale getirmemiz için 6 Component için de module dosyası yazacağımız anlamına geliyor.

Her bir Component için oluşturacağımız dosyası şöyle olacaktır;

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PostsComponent } from './posts.component';
import { RouterModule } from '@angular/router';

export const postsRouting = [
  { path: '', component: PostsComponent }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(postsRouting)
  ],
  exports: [RouterModule],
  declarations: [PostsComponent],
  providers: [],
})
export class PostsModule { }

Yeni oluşturduğumuz bu dosyamız bizlere artık PostsComponent’ine tıklandığında veya bu Component tetiklendiğinde yüklenmesi gereken modulleri göstermekte.

Diğer Component’lerimiz içinde aynı dosyayı Component’lerimizin adlarına göre düzenleyip oluşturmamız gerekmekte.

Ardından, ana modulumuz olan AppModule dosyamızı düzenlememiz gerekmekte.

const appRoutes:Routes = [
  {
    path: 'posts', 
    loadChildren: () => import('./Pages/posts/posts.module').then(m => m.PostsModule)
  },
  {
    path: 'comments', 
    loadChildren: () => import('./Pages/comments/comments.module').then(m => m.CommentsModule)
  },
  {
    path: 'albums', 
    loadChildren: () => import('./Pages/albums/albums.module').then(m => m.AlbumsModule)
  },
  {
    path: 'photos', 
    loadChildren: () => import('./Pages/photos/photos.module').then(m => m.PhotosModule)
  },
  {
    path: 'todos', 
    loadChildren: () => import('./Pages/todos/todos.module').then(m => m.TodosModule)
  },
  {
    path: 'users', 
    loadChildren: () => import('./Pages/users/users.module').then(m => m.UsersModule)
  },
  { path: '', pathMatch: 'full', redirectTo: '' }
]
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports:[],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Yaptığımız bu değişiklik ile aslında AppModule dosyasına hangi path’e gidilmişse orada ki path’in sahip olmuş olduğu Module dosyasını çalıştırmamızı söyledik.

Şimdi tekrardan projemizi ayağa kaldırıp console’umuzu inceleyelim.

Posts buttonuna tıkladığımızda bizi götürdüğü path ile açılan postsModule.js’imizi console’umuzda görmekteyiz. Arından farklı bir buttona tıkladığımızda:

Console’umuza baktığımızda gene görmekteyiz ki tıkladığımız yani açılmış olan Component’imizin module dosyası çalışmakta. Lazy Loading genellikle bir nesnenin ihtiyaç duyulana kadar yüklenmemesi olayına denir. Bu örneğimizde tıkladığımız anda yalnızca o Component’e ait module dosyası yüklenecektir.

Elimden geldiğince anlaşılır olmaya çalıştım yazımı okuduğunuz ve incelediğiniz için teşekkürler. Bir sonra ki yazım Reactive Forms olacaktır.

Tekrardan görüşmek üzere.