Vite Kullanımı

Vite aslında vue cli gibi kullanabileceğimiz bir build tool. Vite’ı temelde diğer toollardan ayıran özelliği “hız”.

Developerların yaptıkları değişikliklerin daha erken yansıması amacıyla yapılıyor. Peki nedir vite’ı diğer toollardan daha hızlı yapan şey?

Vite’ın temel mantığında şu var: Büyük bileşenleri(kütüphaneler gibi) sunucuda tut ve değişmedikleri müddetçe cache’den çağır. Çünkü asıl yavaşlığın kaynağı büyük bileşenler. Örneğin edit componentinde bir cosole.log eklemesi yaptık geleneksel yöntemlerde bunu görmemiz birkaç dakikamızı alır. Vite ise hot update yaptığından dolayı yalnızca değişikliğin olduğu kısmı yeniden yükler.

Gelin birlikte vite’ı kullanarak projemizi kuralım.

Gördüğünüz üzere bir çok framework’te kullanabilirsiniz ben vue ile devam ediyorum.

Projeyi çalıştırdığımızda browser’da göreceğimiz şey şu

Network tabını dikkatli incelediğimizde aslında vte’ın mantığını anlamaya biraz daha yaklaşıyoruz. Projemiz bir bütün ve server’a çıktı serverda proje modüllere ayrıldı ve her bir dosyayı ayrı ayrı görüyoruz.

Style dosyaları dahil network tabında görüntülenebilir. Burada style dosyalarını alıyor ve js’e çeviriyor şu şekilde göstereyim

HelloWorld componenti içinde bulunan count butonunu incelerseniz değişen eleman yalnızca o buton içindeki value olduğundan tekrar render edilen tek kısmın buton alanı olduğunu göreceksiniz. Assetdeve diğer textlerde değişiklik olmadığından o modüllerin render olmasına gerek yok.

Burada tanımladığı const __vite__css aslında bizim css rulelarımızı yazdığımız kısım oluyor. Bu rulelardan herhangi birinde güncelleme yaptığımızda yalnızca ilgili modül güncellenecek bu sayede.

Vite’ı pluginlerle destekleyip daha farklı kullanımlarını keşfedebilirsiniz. Temelde hızın kavramı ve bu işi nasıl yaptığından projenin nasıl kurulacağından bahsettim umarım fayda sağlar👩🏻‍💻