Vue Js Lazy Load Kullanımı

Yazılım

Lazy Load Nedir?

Lazy Load (tembel yükleme) sayfalarımızın ihtiyaç duyduğu bir özelliktir. Kullanıcılar sayfalar arası geçiş yaparken sadece gördüğü kısmı yükleyerek, sayfa açılış hızını arttırabiliriz ve kullanıcının görmediği kısımları gereksiz yere yüklememiş oluruz.

Lazy load işlemini Vue Js projesinde üzerinde deniyor olacağız. Proje içeriğinde birkaç sayfa olacak bu sayfaları birbirinden bağımsız olarak yüklüyor olacağız. Sonrasında da herhangi sayfa içerisinde bir component oluşturup, o component özelinde Lazy Load işlemi uyguluyor olacağız.

Kurulum

npm init vite@latest

diyerek bir vue projesi oluşturalım.

npm i vue-router

router ile sayfaları birbirinden bağımsız yükleyeceğiz. Bunun için de router i projemize ekleyelim.

Tasarım olarak toplamda 3 sayfamız bulunuyor. İlk olarak ana sayfa içerisine yönlendiriyoruz.

Proje Tasarımı

Bütün sayfaların ilk açılışta yüklenmesi sayfalarımızın ilk açılışta yavaş açılmasını sağlar. Bu da istediğimiz bir durum değil.

Not Lazy Router

All Network

Sayfalarımızı yukarıdaki şekilde import edersek bu şekilde bütün sayfalar ilk açılışta geliyor olacak. Şimdi bu durumu, hangi sayfa yüklendiyse sadece o sayfa yüklensin şeklinde güncelleyelim.

Lazy Router

Sayfalarımızı yukarıdaki şekilde import ederek lazy load hale getirdik. Aşağıdaki görsel ise Home.vue adresine ait sonuç.

Home Network

Şimdi de Pictures.vue içerisindeki component için lazy load yapalım sonrasında Pictures.vue içerisinde popüler görselleri göstereceğimiz bir component oluşturalım. Adı ListItem.vue olsun ve bu component sayfa içerisinde tetiklendiği anda yükleniyor olacak.

Lazy Component

ListItem.vue componentini asenkron olarak çalıştırmamız gerekecek. Bunun için defineAsyncComponent i kullanacağız. Sonrasında Suspense kullanarak component #default anında gösteriliyor olacak ve #fallback anında ise Spinner component i gözüküyor olacak. çalışması için de span içerisindeki component yükleyi show ile tetiklememiz gerekecek.

defineAsyncComponent

Component Aktif

Supsense

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Fill out this field
Fill out this field
Lütfen geçerli bir e-posta adresi yazın.

Yeni
Sosyal Medya
Instagram
YouTube
Instagram
YouTube
Bu yazıyı beğendin mi? Arkadaşlarınla paylaş!
Benzer İçerikler: