Vite ile geliştirme sunucusunu saniyelere indirmek

Bir süre önce yeni bir frontend projesi başlatırken Vite’ı denemeye karar verdim. Beklentim “biraz daha hızlı bir webpack alternatifi”ydi. Birkaç gün sonra Webpack’e geri dönmek istemediğimi fark ettim — bu yüzden neden bu kadar fark yarattığını not almak istedim.

Geri bildirim döngüsü (feedback loop), geliştirme ortamının en kritik ölçütü bana göre. Bir değişikliği tarayıcıda görmek için kaç saniye beklediğiniz, günde yüzlerce kez tekrarlanan bir eylem. O yüzden bu alanda yapılan iyileştirme, söylendiği kadar küçük bir kazanım değil.

Neden Webpack bu kadar yavaşlıyor

Webpack’in mimarisi “her şeyi paketleyen araç” üzerine kurulu. Geliştirme sunucusu başlatıldığında tüm modül grafiği (dependency graph) oluşturulur, sonra tek bir bundle üretilir ve tarayıcıya sunulur. Proje büyüdükçe bu grafik de büyür; başlangıç süresi ve hot reload süresi uzar.

Bir Vue + TypeScript projesinde 300 bileşene ulaştığınızda cold start 30-40 saniyeyi bulabiliyor. Her kaydetmede saniyeler beklemek, konsantrasyon akışını kesiyor. Sorunu çözmek için webpack yapılandırmasını optimize etmek, cache ayarlamak, thread-loader eklemek… bunlar işe yarıyor ama temeldeki sorunu çözmüyor.

Vite’ın yaklaşımı farklı

Vite iki ayrı problem için iki farklı strateji kullanıyor.

Geliştirme sunucusu için: Tarayıcıların artık ESM’i (ES Modules) doğrudan desteklediğini fark ediyor. Modülleri paketlemek yerine doğrudan tarayıcıya veriyor. Tarayıcı hangi modüle ihtiyaç duyarsa onu istiyor, Vite de yalnızca o modülü dönüştürüp sunuyor. Bu sayede cold start neredeyse anlık — projenin boyutundan bağımsız.

// vite.config.js — minimal bir yapılandırma bu kadar yeterli
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

Production build için: esbuild ve Rollup’ı birlikte kullanıyor. esbuild Go ile yazılmış ve son derece hızlı; TypeScript transpilasyonu için kullanılıyor. Rollup ise gerçek bundling ve tree-shaking için devreye giriyor.

Bağımlılıklar (dependencies) için: node_modules içindeki paketleri başlangıçta esbuild ile önceden derliyor ve önbelleğe alıyor. Bunlar nadiren değiştiğinden bir kez yapılması yeterli.

Somut fark ne kadar

Aynı projeyi her iki araçla denedim:

Ölçüt	Webpack	Vite
Cold start	~28 saniye	~400 ms
Hot reload (küçük değişiklik)	~3-5 saniye	~50 ms
Production build	~45 saniye	~12 saniye

Bu rakamlar her projede değişir ama oran tutarlı.

Nereye kadar doğru seçim

Vite her proje için mükemmel değil. Dikkat edilmesi gereken noktalar var.

CommonJS bağımlılıkları: Bazı eski npm paketleri ESM yerine CommonJS formatında. Vite bunları development sırasında otomatik dönüştürebiliyor ama zaman zaman uyumluluk sorunları çıkıyor. Eski ve büyük bir bağımlılık yığınınız varsa bu bir engel olabilir.

Geliştirme/production farkı: Development’ta ESM kullanılıyor, production’da Rollup bundle üretiyor. Teorik olarak farklı davranışlar görebilirsiniz. Pratikte nadiren sorun çıkardı ama kafanın bir köşesinde tutulması gereken bir trade-off.

Ekosistem olgunluğu: Webpack 10 yıllık bir araç; her edge case için bir loader veya plugin var. Vite 2020’de çıktı, ekosistemi hızla büyüyor ama bazı nişler henüz boş.

Hangi durumlarda geçişi öneririm

Yeni bir proje başlatıyorsanız ve Vue, React veya Svelte kullanıyorsanız Vite’ı doğrudan seçin. Mevcut bir projeyi taşıyorsanız bağımlılık listenize bakın — CommonJS kullanan kritik paketleriniz varsa test ortamında deneyin, sonra karar verin.

Monorepo veya büyük kurumsal projeler için ise webpack tabanlı araçların (özellikle Nx veya Turborepo gibi sistemlerin) daha iyi entegrasyon seçenekleri sunduğunu görüyorum. Vite burada da ilerliyor ama henüz o kadar olgun değil.

Benim için en büyük kazanım performanstan çok konsantrasyon akışında oldu. Kaydet → tarayıcıda gör döngüsü anlık olunca daha fazla deneme yapıyorsunuz, daha az bekliyorsunuz. Bu tür araç değişikliklerinin asıl değeri da burada.