𝗩𝗶𝘁𝗲'ı 𝗕𝗮𝘀𝗶𝘁𝗹𝗲𝘀̧𝘁𝗶𝗿𝗺𝗲𝗸
Webpack veya CRA gibi eski araçlar, önce tüm projenizi paketleyerek (bundling) çalışır. Her dosyayı okurlar ve bunları tek bir büyük JavaScript dosyasında birleştirirler. Bu, küçük projeler için işe yarar. Ancak binlerce modülü olan büyük projelerde başarısız olur. Büyük paketlerin oluşturulması saniyeler hatta dakikalar sürer. Her dosya kaydettiğinizde, araç paketin büyük bölümlerini yeniden oluşturur.
Vite farklı çalışır. Modern tarayıcılar ES modüllerini yerel olarak destekler. Vite, geliştirme aşamasında kodunuzu paketlemez. Her dosyayı, yalnızca tarayıcı talep ettiğinde ayrı bir modül olarak sunar.
Bir açık büfe restoranını düşünün. Şef, kapılar açılmadan önce her bir yemeği pişirir. Eğer küçük bir değişiklik isterseniz, şef büfenin çoğunu yeniden hazırlamak zorunda kalır. Yemeğiniz için uzun süre beklersiniz. Webpack bu şekilde çalışır.
Şimdi de bir alakart restoranı düşünün. Kapılar hemen açılır. Bir yemek sipariş edersiniz. Şef sadece o yemeği hazırlar. Daha sonra tatlı isterseniz, şef sadece tatlıyı hazırlar. Tüm menünün pişmesini beklemezsiniz. Vite bu şekilde çalışır.
Vite, iki farklı ihtiyaç için iki farklı strateji kullanır:
Geliştirme (vite dev)
- Strateji: Paketleme yapmadan yerel ESM modüllerini sunar.
- Hız: Anlık. Proje boyutuna bağlı değildir.
- Neden: Yerel ağ istekleri hızlıdır.
Üretim (vite build)
- Strateji: Rolldown kullanarak her şeyi paketler.
- Hız: Proje boyutuna bağlıdır.
- Neden: Yüzlerce ayrı dosya, gerçek kullanıcılar için çok fazla HTTP isteği oluşturur. Paketleme, nihai sitenin onlar için daha hızlı olmasını sağlar.
Vite, kod yazarken size hız, yayına aldığınızda ise performans sağlar.
Kaynak: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62