Vite Nedir?
Vite (Fransızcada “hızlı” demektir, “vit” diye okunur), açık kaynak bir ön yüz derleme aracıdır. Vue'nun yaratıcısı Evan You tarafından 2020'de başlatıldı; 2021'den beri her framework'le çalışıyor. İki parçadan oluşur: site geliştirilirken kullanılan bir geliştirme sunucusu ve kaynak kodu yayındaki site için optimize dosyalara dönüştüren bir derleme komutu.
Geliştirme sırasında Vite, kodu tarayıcıya yerel JavaScript modülleri olarak sunar; yalnızca sayfanın ihtiyaç duyduğu dosyalar işlenir. Bir dosya değiştiğinde anında modül güncelleme (HMR), sayfayı baştan yüklemeden yalnızca o parçayı yeniler. Yayın için Vite kodu, Rust ile yazılmış hızlı bir paketleyici olan Rolldown ile paketler, yalnızca gereken yerde yüklenen parçalara böler, küçültür ve her dosya adına içerikten üretilen bir parmak izi ekler; böylece tarayıcılar dosyaları uzun süre güvenle önbellekte tutabilir.
Vite, MIT lisansıyla ücretsiz ve açık kaynaktır; yönetimi Vite ekibindedir. Evan You 2024'te Vite ve ilgili araçlar üzerinde çalışan VoidZero şirketini kurdu, VoidZero da 2026'da Cloudflare'e katıldı. Vite herhangi bir sağlayıcıya bağlı değildir; onunla kurulan siteler her barındırmada çalışır. Yeni Vue projelerinin standart başlangıç noktasıdır ve Astro da Vite üzerine kuruludur.
Vite'i Nerede Kullanıyoruz?
Vite, ön yüz projelerimizde perde arkasında çalışıyor. Özellikle şu işlerde kullanıyoruz:
Vue ve React Projeleri
Vue ya da React ile kurulan arayüzler, paneller ve uygulamalar, yararlı olduğu yerde TypeScript'le birlikte bir Vite kurulumuyla başlar. Aynı araç projeyi geliştirme sırasında sunar ve yayın için derler.
Düz JavaScript Siteleri
Her site bir framework gerektirmez. HTML, CSS ve JavaScript ile kurulan daha sade sitelerde de Vite modülleri paketler, CSS'yi işler ve her dosyaya önbelleğe uygun bir ad verir.
Canlı Tasarım İncelemeleri
Değişiklikler tarayıcıda anında göründüğü için geliştirici ve tasarımcı boşlukları, renkleri ve hareketi ekranda birlikte düzenleyebilir, sonucu Figma'daki tasarımla karşılaştırarak ilerleyebilir.
Gömülebilir Bileşenler
Birden fazla sitede yer alması gereken bir hesaplayıcı, randevu formu ya da küçük bir uygulama, Vite'in kütüphane moduyla bir kez paketlenip her siteye eklenebilir.
Neden Vite?
Anında Geri Bildirim
Geliştirme sunucusu hızla açılır, değişiklikler bir anda görünür; zamanımızı derleme beklemeye değil, sitenizin ayrıntılarına harcarız.
Hafif ve Önbelleğe Uygun Dosyalar
Kod, her sayfa yalnızca ihtiyacı olanı yükleyecek şekilde bölünür, dosyalar küçültülür; içerikten üretilen adlar sayesinde tarayıcılar ve Cloudflare onları uzun süre önbellekte tutabilir.
Açık ve Taşınabilir
Vite ücretsizdir; Vue, React ve düz JavaScript ile çalışır ve her barındırmanın sunabileceği standart dosyalar üretir. Projeniz bir sağlayıcıya kilitlenmez.
Projenizde Nasıl İlerliyoruz?
Projenin başında Vite'i Vue, React ya da düz JavaScript için uygun şablonla kuruyor, gereken yerde TypeScript ekliyor ve klasör yapısında anlaşıyoruz. Geliştirme boyunca her değişiklik tarayıcıda hemen görünüyor; bu da tasarım incelemelerini kısa ve odaklı tutuyor.
Yayından önce bir üretim derlemesi alıyor, her dosyanın boyutunu ve her sayfanın neyi yüklediğini kontrol ediyor, sonucu Lighthouse ile ölçüyoruz. Bitmiş dosyalar Cloudflare üzerinden sunuluyor; proje, derleme ayarları ve tüm geçmişiyle birlikte size teslim ediliyor.
