Webpack → Vite: Bundler Geçiş Hikayesi
(engineering.ab180.co)Servis yayına alındıktan sonra 5 yıl boyunca kullandığımız Webpack’i Vite’a taşırken yaşadıklarımızı paylaşıyorum. Eksikleri çok olabilir ama keyifle okursanız sevinirim.
Webpack’in avantajları ve web ekosistemindeki değişim
Webpack son 10 yılda geliştirilip yönetildiği için iyi oturmuş bir ekosisteme sahip.
Create React App gibi pek çok yerde de kullanılıyor ve modülleri IIFE yöntemiyle paketleyerek çeşitli tarayıcıları destekliyor.
Ancak 5 yıl içinde servis içindeki özellikler neredeyse 3 kat artınca build süreleri uzadı ve geliştirici deneyimi kötüleşti. Ayrıca web ekosisteminin ilerlemesiyle ES Module desteği gibi çeşitli değişimler yaşandı.
Bundler + Native
Son 1–2 yılda Native’in gücünden yararlanarak bundling ve transpiling yapmak öne çıkmaya başladı. Tek iş parçacıklı JS’nin işlem sınırlarını aşmak için çeşitli denemeler yapıldı.
Golang tabanlı esbuild ve Rust tabanlı SWC bunun en bilinen örnekleri.
İlk deneme: yalnızca esbuild kullanan bundling
O dönemde kararlılık, eklentiler ve ekosistem dikkate alınarak esbuild tabanlı bir bundler kullanmaya karar verildi. Ayrıca esbuild’in kendi performansının ne seviyede olduğunu görmek istedik.
Paketi kurup build script’ini çalıştırınca, daha önce yaklaşık 210 saniye süren build yalnızca 2,16 saniyede tamamlandı. Yaklaşık 100 kat daha hızlı build hızı görüldü.
Ancak EmotionJS kullanımı için Babel eklendiğinde hız 10 kat düştü.
Ayrıca esbuild HMR desteklemediği için kullanımın zor olacağına karar verildi. HMR’ı doğrudan kendimiz de uygulayabilirdik ama bunun iş gücü ile bakım/onarım/yönetim maliyetinin yüksek olacağını düşündük.
İkinci deneme: Vite ile bundling
Vite yaklaşımının temelinde Dependencies ile Source code’u ayırmak var.
Dependencies, kurulduktan sonra içeriği değişmediği için esbuild ile önceden transpile ediliyor. Source code ise sık değiştiği için ESM olarak yükleniyor. Build çıktıları cache’lenerek hızlı geliştirme build’leri mümkün hale geliyor.
Vite’ın sunduğu şablonları kullanarak geçişi kolayca yaptık. Birkaç sorun vardı ama kısa sürede çözüldü; ayrıca Webpack’e kıyasla çok daha kısa ve sade bir yapılandırma elde ettik.
Bundler geçişinin sonucu
Netlify üzerindeki build süresi ölçümlerinde ortalama 250 saniyeden ortalama 90 saniyeye inildi. Öncekinin %36’sı seviyesine düştü.
Yapılandırma dosyaları sadeleşince ekip üyeleri bunu kullanarak özel build ortamlarını kolayca oluşturabildi ve verimlilik arttı.
Daha iyi iyileştirmeler için Babel bağımlılığı olmayan bir CSS-in-JS kütüphanesine geçiş ve Monorepo uygulaması değerlendirilebilir.
Ekosistem açısından bakıldığında, SWC kararlı hale geldiğinde Babel’in yerini alabilir; ayrıca TypeScript Type Checker da Native’e port ediliyor.
Çıkarılan dersler
- Büyük görünen işler de küçük parçalara bölünüp test edilir ve bolca tartışılırsa kolayca çözülebilir.
- Bugün yaygın olarak kullanılan araçlar bile ekosistemin gelişimiyle hızla ortadan kaybolabilir.
- İyi erişilebilirlik, iyi bir çalışma ortamı yaratır.
3 yorum
esbuild hızı gerçekten şaşırtıcı.
esbuild ana sayfasında bile 10-100x daha hızlı olduğunu öne çıkardığını görünce biraz şüphelenmiştim, ama gerçekten görünce sarsıcıydı!
Ben de öyle bir çağın gelmesini gerçekten sabırsızlıkla bekliyorum! Geliştirme yapmak gerçekten çok daha keyifli olacak gibi görünüyor :)