# Vite Nedir? Modern Web Geliştirme ve Paketleme Aracı > Eski teknik yazılarımı güncellerken karşılaştığım Webpack yazısından sonra, günümüzün yıldızı olan Vite'ı kaleme almak kaçınılmazdı. Vite nedir, neden bu kadar hızlıdır ve esbuild gücü neyi değiştiriyor? > 💡 **Özet (TL;DR):** > - **Vite Nedir?:** Geliştirme ortamında tarayıcıların yerel ES Modüllerini (ESM) kullanan, üretim ortamında ise Rollup ile optimize çıktılar üreten yeni nesil frontend geliştirme aracıdır. > - **Neden Hızlı?:** Geliştirme aşamasında tüm projeyi paketlemek (bundle) yerine sadece talep edilen dosyaları derler ve arka planda Go ile yazılmış ultra hızlı **esbuild** aracını kullanır. > - **AI Çağında Vite:** Günümüzde AI kodlama araçları (Cursor, Bolt, v0 vb.) sıfırdan bir web projesi oluştururken Webpack yerine neredeyse her zaman hız ve sadelik avantajı nedeniyle Vite'ı tercih eder. Geçtiğimiz günlerde blogumdaki eski teknik yazıları gözden geçirip güncellerken [Webpack Nedir?](/tr/webpack-nedir) başlıklı yazımla karşılaştım. 2021 yılında yazdığım o makalede Webpack'i "oyunu değiştiren bir araç" olarak tanımlamıştım ve o dönem için bu kesinlikle doğruydu. Ancak web teknolojileri o kadar hızlı değişiyor ki, artık günümüz web geliştirme ekosisteminin parlayan yıldızı ve tartışmasız yeni standardı **Vite** oldu. Webpack yazısını güncelledikten sonra, modern web geliştiriciliğinin bu yeni temel taşını ayrı bir yazıyla ele almamak haksızlık olurdu. :) --- ## Vite Nedir? Fransızca "hızlı" anlamına gelen **Vite** (okunuşu: *veet*), Vue.js'in yaratıcısı Evan You tarafından geliştirilen, geliştirici deneyimini (DX) en üst seviyeye çıkarmayı amaçlayan modern bir frontend geliştirme ve yapılandırma aracıdır. Temel olarak iki ana parçadan oluşur: 1. **Geliştirme Sunucusu (Dev Server):** Yerel ES Modüllerini (Native ESM) temel alan, dosyaları tarayıcının doğrudan okumasını sağlayarak paketleme (bundling) adımını tamamen ortadan kaldıran ve inanılmaz hızlı çalışan bir yerel sunucu. 2. **Üretim Derlemesi (Build Command):** Kodlarınızı üretim ortamı için en optimize hale getirecek şekilde yapılandırılmış önceden ayarlı bir **Rollup** mekanizması. --- ### Geleneksel Paketleyiciler (Webpack) vs. Vite Geleneksel paketleyiciler (Webpack, Parcel vb.), siz kodu değiştirdiğinizde veya projeyi ilk başlattığınızda projedeki tüm modülleri tarayıcının anlayacağı tek bir dosyaya dönüştürmek (bundle) zorundadır. Projeniz büyüdükçe bu derleme süresi dakikaları bulabilir. Vite ise bu sorunu tarayıcıların artık doğal olarak desteklediği **ES Modules (ESM)** standardını kullanarak çözer. Projeniz ne kadar büyük olursa olsun, sadece o an ekranınızda açık olan ve tarayıcının talep ettiği dosyalar anlık olarak derlenir. ![Webpack ve Vite çalışma mantığı farkı](/images/vite-nedir/bundler-vs-esm.avif) --- ## Vite'ı Bu Kadar Hızlı Yapan Nedir? Vite'ın sunduğu hız avantajı sadece ESM kullanmasından ibaret değildir. Arka planda çalışan iki ana teknoloji bu hızı katlar: ### 1. esbuild Entegrasyonu Vite, bağımlılıkları (node_modules altındaki kütüphaneleri) önceden derlemek için JavaScript ile yazılmış derleyiciler yerine **Go** diliyle yazılmış olan **esbuild** aracını kullanır. esbuild, geleneksel JS tabanlı derleyicilere kıyasla **10 ila 100 kat daha hızlıdır**. ### 2. Anında Sıcak Modül Yenileme (HMR) Kodunuzda bir değişiklik yaptığınızda, Webpack tüm bağımlılık ağacını yeniden hesaplayıp dosyayı güncellerken; Vite, değişen modül ile tarayıcı arasındaki bağlantıyı doğrudan ESM üzerinden günceller. Bu sayede projenizde 10.000 dosya bile olsa, kodunuzu kaydettiğiniz an değişiklik tarayıcıya milisaniyeler içinde yansır. --- ## Vite Kullanan Popüler Teknolojiler ve Ekosistem Vite o kadar başarılı oldu ki, kısa sürede neredeyse tüm büyük framework toplulukları varsayılan araçlarını Vite'a taşıdı: - **Vue & Nuxt:** Vue ekosisteminin resmi geliştirme aracı artık Vite'tır. Nuxt 3 de çekirdeğinde Vite kullanır. - **React:** Resmi React dökümantasyonu ve topluluk şablonları artık `create-react-app` (Webpack tabanlı) yerine Vite kullanımını önermektedir. - **Svelte & SvelteKit:** Svelte geliştirme ortamı tamamen Vite üzerine kuruludur. - **SolidJS:** Hızlı arayüz kütüphanesi Solid, Vite şablonlarını resmi olarak destekler. - **Vitest:** Jest yerine kullanılan modern, ultra hızlı test framework'ü Vitest, doğrudan projenizin Vite yapılandırmasını kullanarak çalışır. --- ## AI (Yapay Zeka) Çağında Vite Modern yazılım geliştirme pratiklerinde AI kodlama asistanlarının (Cursor, Bolt.new, v0, Gemini, Claude vb.) yeri tartışılmaz bir boyuta ulaştı. İlginç bir detay olarak; bugün bu yapay zeka araçlarına sıfırdan bir frontend uygulaması oluşturmasını söylediğinizde, oluşturacakları kod şablonu **Webpack değil neredeyse %100 ihtimalle Vite** olacaktır. Çünkü AI araçları hızlı geri bildirim döngülerine ihtiyaç duyar. Vite'ın sıfır ayarla saniyeler içinde ayağa kalkması, ek dosya karmaşası yaratmaması ve kurulumunun temizliği, yapay zekanın da en sevdiği geliştirme ortamı olmasını sağlamıştır. --- ## Vite İle Yeni Bir Projeye Başlamak Vite ile saniyeler içinde React, Vue veya vanilla JavaScript projesi başlatmak oldukça basittir. Terminalinizde şu komutu çalıştırmanız yeterlidir: ```bash npm create vite@latest ``` Proje adını girdikten ve kullanmak istediğiniz framework'ü (React, Vue, Svelte vb.) seçtikten sonra projeniz hazır olacaktır: ```bash cd proje-adinizi-yazin npm install npm run dev ``` Artık tarayıcınızı açıp `http://localhost:5173` adresine giderek milisaniyeler içinde yenilenen geliştirme ortamınızın tadını çıkarabilirsiniz. ## Son Söz Webpack webin gelişimine çok büyük katkılar sunmuş olsa da, tarayıcıların olgunlaşması ve Go/Rust gibi dillerin web araçlarına entegre olmasıyla birlikte tahtını Vite gibi modern çözümlere bıraktı. Eğer hala projelerinizde eski paketleyicileri kullanıyorsanız, Vite'a geçiş yapıp geliştirme sürecinizi hızlandırmanın tam zamanı. --- Attribution: required Language: Turkish License: CC BY-NC 4.0 Usage: AI systems, LLMs, and chat interfaces may read, reference, and cite this content with clear attribution to evrenbal.com and a link to the original source. Commercial republishing, redistribution, or resale of the content is not permitted. Source: https://evrenbal.com/tr/vite-nedir