Angular, web uygulamaları geliştirmek için oldukça kapsamlı ve yetenekli bir platformdur. Fakat büyük uygulamalarda, uygulamanın başlangıç hızının yavaşlaması olasıdır. Bu sorunu çözmek için Angular, “Lazy Loading” isimli bir özellik sunar. Bu yazımda Lazy Loading’in ne olduğunu, neden kullanılması gerektiğini ve örnek kodları inceleyeceğiz.
Lazy Loading Nedir?
Lazy Loading, uygulamanın sadece gerektiğinde modülleri yüklemesini sağlayan bir tekniktir. Başka bir deyişle, kullanıcının bir modüle ihtiyaç duyduğunda, o modül dinamik olarak yüklenir ve böylece uygulamanın başlangıç yükleme süresi hızlanır.
Neden Lazy Loading Kullanmalıyız?
Performans Artışı: Uygulama ilk kez yüklendiğinde sadece gereken modülleri yükler, böylece başlangıçta daha az kod yüklenir ve uygulamanın başlangıç hızı artar.
Kullanıcı Deneyimini İyileştirme: Kullanıcının ihtiyaç duymadığı bölümler yüklenmez, bu da daha hızlı bir deneyim sunar.
Bant Genişliğini Optimize Etme: Kullanılmayan kodun indirilmesini engelleyerek veri kullanımını en aza indirir.
Lazy Loading Uygulaması
Bir e-ticaret uygulaması düşünelim. Uygulamamızda bir “Products” sayfası, bir “Cart” sayfası ve bir “MyAccount” sayfası olsun. Kullanıcıların çoğu sadece “Products” sayfasını ziyaret edecek, bu nedenle diğer sayfaların hemen yüklenmesi gereksiz olabilir.
Adım 1: Modülleri Ayarlama
Öncelikle her sayfa için ayrı bir Angular modülü oluşturmanız gerekir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// products.module.ts @NgModule({ declarations: [ProductsComponent], imports: [CommonModule, ProductsRoutingModule] }) export class ProductsModule { } // cart.module.ts @NgModule({ declarations: [CartComponent], imports: [CommonModule, CartRoutingModule] }) export class CartModule { } // myAccount.module.ts @NgModule({ declarations: [MyAccountComponent], imports: [CommonModule, MyAccountRoutingModule] }) export class MyAccountModule { } |
Adım 2: Yönlendirme Ayarları
Her modül için ayrı bir routing modülü oluşturmanız gerekiyor. Lazy loading için ana app-routing.module.ts dosyasında bu modülleri tanımlayalım.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const routes: Routes = [ { path: 'products', loadChildren: () => import('./products/products.module').then(m => m.ProductsModule) }, { path: 'cart', loadChildren: () => import('./cart/cart.module').then(m => m.CartModule) }, { path: 'my-account', loadChildren: () => import('./myAccount/myAccount.module').then(m => m.MyAccountModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } |
Bu kodlar, kullanıcı ilgili rotalara eriştiğinde modülleri dinamik olarak yükleyecektir.
Özetle, Lazy Loading, Angular’da büyük projelerde performansı artırmak ve kullanıcı deneyimini iyileştirmek için mükemmel bir yöntemdir. Uygulamanızın daha hızlı yanıt vermesini sağlar ve gereksiz kod yüklemesini önler.
Umarım “Angular’da Lazy Loading: Nedir ve Nasıl Kullanılır?” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
Angular Guard’lar: Route Koruma ve Kullanıcı Yetkilendirme
Yeni bir yazımda görüşmek üzere.
Happy coding!
