[{"data":1,"prerenderedAt":480},["ShallowReactive",2],{"post-\u002Ftr\u002Fvite-nedir":3},{"page":4,"translation":324,"nav":341,"related":467,"random":473},{"id":5,"title":6,"body":7,"categories":322,"category":324,"date":325,"description":326,"draft":327,"extension":328,"image":329,"kind":324,"lang":330,"meta":331,"navigation":332,"path":333,"readingTime":334,"seo":335,"slug":66,"stem":336,"tags":337,"translationKey":324,"type":323,"updated":324,"__hash__":340},"postsTr\u002Ftr\u002Fvite-nedir.md","Vite Nedir? Modern Web Geliştirme ve Paketleme Aracı",{"type":8,"value":9,"toc":309},"minimark",[10,47,60,63,68,79,82,101,103,108,111,118,125,127,131,134,138,152,156,159,161,165,168,205,207,211,218,221,223,227,230,255,258,291,298,302,305],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"Özet (TL;DR):",[22,23,24,31,41],"ul",{},[25,26,27,30],"li",{},[18,28,29],{},"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.",[25,32,33,36,37,40],{},[18,34,35],{},"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ı ",[18,38,39],{},"esbuild"," aracını kullanır.",[25,42,43,46],{},[18,44,45],{},"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.",[14,48,49,50,55,56,59],{},"Geçtiğimiz günlerde blogumdaki eski teknik yazıları gözden geçirip güncellerken ",[51,52,54],"a",{"href":53},"\u002Ftr\u002Fwebpack-nedir","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ı ",[18,57,58],{},"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. :)",[61,62],"hr",{},[64,65,67],"h2",{"id":66},"vite-nedir","Vite Nedir?",[14,69,70,71,73,74,78],{},"Fransızca \"hızlı\" anlamına gelen ",[18,72,58],{}," (okunuşu: ",[75,76,77],"em",{},"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.",[14,80,81],{},"Temel olarak iki ana parçadan oluşur:",[83,84,85,91],"ol",{},[25,86,87,90],{},[18,88,89],{},"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.",[25,92,93,96,97,100],{},[18,94,95],{},"Üretim Derlemesi (Build Command):"," Kodlarınızı üretim ortamı için en optimize hale getirecek şekilde yapılandırılmış önceden ayarlı bir ",[18,98,99],{},"Rollup"," mekanizması.",[61,102],{},[104,105,107],"h3",{"id":106},"geleneksel-paketleyiciler-webpack-vs-vite","Geleneksel Paketleyiciler (Webpack) vs. Vite",[14,109,110],{},"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.",[14,112,113,114,117],{},"Vite ise bu sorunu tarayıcıların artık doğal olarak desteklediği ",[18,115,116],{},"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.",[14,119,120],{},[121,122],"img",{"alt":123,"src":124},"Webpack ve Vite çalışma mantığı farkı","\u002Fimages\u002Fvite-nedir\u002Fbundler-vs-esm.avif",[61,126],{},[64,128,130],{"id":129},"viteı-bu-kadar-hızlı-yapan-nedir","Vite'ı Bu Kadar Hızlı Yapan Nedir?",[14,132,133],{},"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:",[104,135,137],{"id":136},"_1-esbuild-entegrasyonu","1. esbuild Entegrasyonu",[14,139,140,141,144,145,147,148,151],{},"Vite, bağımlılıkları (node_modules altındaki kütüphaneleri) önceden derlemek için JavaScript ile yazılmış derleyiciler yerine ",[18,142,143],{},"Go"," diliyle yazılmış olan ",[18,146,39],{}," aracını kullanır. esbuild, geleneksel JS tabanlı derleyicilere kıyasla ",[18,149,150],{},"10 ila 100 kat daha hızlıdır",".",[104,153,155],{"id":154},"_2-anında-sıcak-modül-yenileme-hmr","2. Anında Sıcak Modül Yenileme (HMR)",[14,157,158],{},"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.",[61,160],{},[64,162,164],{"id":163},"vite-kullanan-popüler-teknolojiler-ve-ekosistem","Vite Kullanan Popüler Teknolojiler ve Ekosistem",[14,166,167],{},"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ı:",[22,169,170,176,187,193,199],{},[25,171,172,175],{},[18,173,174],{},"Vue & Nuxt:"," Vue ekosisteminin resmi geliştirme aracı artık Vite'tır. Nuxt 3 de çekirdeğinde Vite kullanır.",[25,177,178,181,182,186],{},[18,179,180],{},"React:"," Resmi React dökümantasyonu ve topluluk şablonları artık ",[183,184,185],"code",{},"create-react-app"," (Webpack tabanlı) yerine Vite kullanımını önermektedir.",[25,188,189,192],{},[18,190,191],{},"Svelte & SvelteKit:"," Svelte geliştirme ortamı tamamen Vite üzerine kuruludur.",[25,194,195,198],{},[18,196,197],{},"SolidJS:"," Hızlı arayüz kütüphanesi Solid, Vite şablonlarını resmi olarak destekler.",[25,200,201,204],{},[18,202,203],{},"Vitest:"," Jest yerine kullanılan modern, ultra hızlı test framework'ü Vitest, doğrudan projenizin Vite yapılandırmasını kullanarak çalışır.",[61,206],{},[64,208,210],{"id":209},"ai-yapay-zeka-çağında-vite","AI (Yapay Zeka) Çağında Vite",[14,212,213,214,217],{},"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 ",[18,215,216],{},"Webpack değil neredeyse %100 ihtimalle Vite"," olacaktır.",[14,219,220],{},"Çü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.",[61,222],{},[64,224,226],{"id":225},"vite-i̇le-yeni-bir-projeye-başlamak","Vite İle Yeni Bir Projeye Başlamak",[14,228,229],{},"Vite ile saniyeler içinde React, Vue veya vanilla JavaScript projesi başlatmak oldukça basittir. Terminalinizde şu komutu çalıştırmanız yeterlidir:",[231,232,237],"pre",{"className":233,"code":234,"language":235,"meta":236,"style":236},"language-bash shiki shiki-themes github-light github-dark","npm create vite@latest\n","bash","",[183,238,239],{"__ignoreMap":236},[240,241,244,248,252],"span",{"class":242,"line":243},"line",1,[240,245,247],{"class":246},"sScJk","npm",[240,249,251],{"class":250},"sZZnC"," create",[240,253,254],{"class":250}," vite@latest\n",[14,256,257],{},"Proje adını girdikten ve kullanmak istediğiniz framework'ü (React, Vue, Svelte vb.) seçtikten sonra projeniz hazır olacaktır:",[231,259,261],{"className":233,"code":260,"language":235,"meta":236,"style":236},"cd proje-adinizi-yazin\nnpm install\nnpm run dev\n",[183,262,263,272,280],{"__ignoreMap":236},[240,264,265,269],{"class":242,"line":243},[240,266,268],{"class":267},"sj4cs","cd",[240,270,271],{"class":250}," proje-adinizi-yazin\n",[240,273,275,277],{"class":242,"line":274},2,[240,276,247],{"class":246},[240,278,279],{"class":250}," install\n",[240,281,283,285,288],{"class":242,"line":282},3,[240,284,247],{"class":246},[240,286,287],{"class":250}," run",[240,289,290],{"class":250}," dev\n",[14,292,293,294,297],{},"Artık tarayıcınızı açıp ",[183,295,296],{},"http:\u002F\u002Flocalhost:5173"," adresine giderek milisaniyeler içinde yenilenen geliştirme ortamınızın tadını çıkarabilirsiniz.",[64,299,301],{"id":300},"son-söz","Son Söz",[14,303,304],{},"Webpack webin gelişimine çok büyük katkılar sunmuş olsa da, tarayıcıların olgunlaşması ve Go\u002FRust 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ı.",[306,307,308],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":236,"searchDepth":274,"depth":274,"links":310},[311,314,318,319,320,321],{"id":66,"depth":274,"text":67,"children":312},[313],{"id":106,"depth":282,"text":107},{"id":129,"depth":274,"text":130,"children":315},[316,317],{"id":136,"depth":282,"text":137},{"id":154,"depth":282,"text":155},{"id":163,"depth":274,"text":164},{"id":209,"depth":274,"text":210},{"id":225,"depth":274,"text":226},{"id":300,"depth":274,"text":301},[323],"technical",null,"2026-06-21","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?",false,"md","\u002Fimages\u002Fhero\u002Fvite-bundler.avif","tr",{},true,"\u002Ftr\u002Fvite-nedir",4,{"title":6,"description":326},"tr\u002Fvite-nedir",[338,339],"javascript","vite","4GZH4pXQ_h6zQ1w26GpHYkGK6kegEyY6CnB_Y4Zxd2o",{"prev":324,"next":342,"others":345,"lucky":464,"readingTime":334},{"path":343,"title":344},"\u002Ftr\u002Fes13-nedir-ecmascript-2022-nedir","ES13 nedir? ECMAScript 2022 nedir?",[346,349,352,353,356,359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461],{"path":347,"title":348},"\u002Ftr\u002Fes11-nedir-ecmascript-2020-nedir","ES11 Nedir? ECMAScript 2020 Nedir?",{"path":350,"title":351},"\u002Ftr\u002Fes15-nedir-ecmascript-2024-nedir","ES15 nedir? ECMAScript 2024 nedir?",{"path":343,"title":344},{"path":354,"title":355},"\u002Ftr\u002Fmemento-tasarim-deseni-nedir","Memento Tasarım Deseni Nedir?",{"path":357,"title":358},"\u002Ftr\u002Fes7-nedir-ecmascript-2016-nedir","ES7 Nedir? ECMAScript 2016 Nedir?",{"path":360,"title":361},"\u002Ftr\u002Fes10-nedir-ecmascript-2019-nedir","ES10 Nedir? ECMAScript 2019 Nedir?",{"path":363,"title":364},"\u002Ftr\u002Fgo-programlama-dilinin-ozellikleri","Go Programlama Dilinin Özellikleri",{"path":366,"title":367},"\u002Ftr\u002Fphp-ve-makine-ogrenimi-php-ml-kutuphanesi","PHP ve Makine Öğrenimi: PHP-ML Kütüphanesi ile Pratik Çözümler",{"path":369,"title":370},"\u002Ftr\u002Fwindows-10-golang-kurulumu","Windows 10 ve 11'de Golang Kurulumu ve GOPATH Yapılandırması",{"path":372,"title":373},"\u002Ftr\u002Ftricolor-garbage-collection-algoritmasi-nedir","Tricolor Garbage Collection Algoritması Nedir?",{"path":375,"title":376},"\u002Ftr\u002Fobserver-tasarim-deseni-nedir","Observer Tasarım Deseni Nedir?",{"path":378,"title":379},"\u002Ftr\u002Fwordpress-yonetici-sifresini-wp-cli-kullanarak-sifirlama","WordPress Yönetici Şifresini WP-CLI Kullanarak Sıfırlama",{"path":381,"title":382},"\u002Ftr\u002Fgo-ve-degiskenler","Go ve Değişkenler",{"path":384,"title":385},"\u002Ftr\u002Fes6-nedir-ecmascript-2015-nedir","ES6 Nedir? ECMAScript 2015 Nedir?",{"path":387,"title":388},"\u002Ftr\u002Fgoda-iota-nedir-iota-ne-zaman-ve-nerede-kullanilir","Go'da iota Nedir? iota Ne Zaman ve Nerede Kullanılır?",{"path":390,"title":391},"\u002Ftr\u002Fes12-nedir-ecmascript-2021-nedir","ES12 Nedir? ECMAScript 2021 Nedir?",{"path":393,"title":394},"\u002Ftr\u002Fes17-nedir-ecmascript-2026-nedir","ES17 nedir? ECMAScript 2026 nedir?",{"path":396,"title":397},"\u002Ftr\u002Fecmascript-nedir-ecmascript-ne-degildir-bilinmesi-gerekenler","ECMAScript Nedir? Bilinmesi Gerekenler...",{"path":399,"title":400},"\u002Ftr\u002Fmediator-tasarim-deseni-nedir","Mediator Tasarım Deseni Nedir?",{"path":402,"title":403},"\u002Ftr\u002Fes14-nedir-ecmascript-2023-nedir","ES14 nedir? ECMAScript 2023 nedir?",{"path":405,"title":406},"\u002Ftr\u002Ffacade-tasarim-deseni-nedir","Facade Tasarım Deseni Nedir?",{"path":408,"title":409},"\u002Ftr\u002Fgo-slice-veri-tipi","Go Veri Tipleri: Slice",{"path":411,"title":412},"\u002Ftr\u002Fself-hosted-api-gateway-nasil-kurulur-kapsamli-rehber","Self-Hosted API Gateway Nasıl Kurulur? Kapsamlı Rehber",{"path":414,"title":415},"\u002Ftr\u002Fubuntu-guncellemesi-sonrasi-cyberpanele-ulasilamama-sorunlarini-giderme","Ubuntu Güncellemesi Sonrası CyberPanel'e Ulaşılamama Sorunlarını Giderme",{"path":417,"title":418},"\u002Ftr\u002Fgo-veri-tipleri-map","Go Veri Tipleri - Map",{"path":420,"title":421},"\u002Ftr\u002Fes9-nedir-ecmascript-2018-nedir","ES9 Nedir? ECMAScript 2018 Nedir?",{"path":423,"title":424},"\u002Ftr\u002Fearly-return-erken-donus-nedir","Early Return \u002F Erken Dönüş nedir?",{"path":426,"title":427},"\u002Ftr\u002Flinuxda-golang-kurulumu","Linux'ta Golang Kurulumu",{"path":429,"title":430},"\u002Ftr\u002Fproxy-tasarim-deseni-nedir","Proxy Tasarım Deseni Nedir?",{"path":432,"title":433},"\u002Ftr\u002Fchain-of-responsibility-deseni-nedir","Chain of Responsibility Deseni Nedir?",{"path":435,"title":436},"\u002Ftr\u002Fbridge-tasarim-deseni-nedir","Bridge Tasarım Deseni Nedir?",{"path":438,"title":439},"\u002Ftr\u002Fcomposite-tasarim-deseni-nedir","Composite Tasarım Deseni Nedir?",{"path":441,"title":442},"\u002Ftr\u002Fubuntu-24-04-uzerinde-cyberpanel-kurulumu","Ubuntu 24.04 LTS ve 22.04 LTS Üzerinde CyberPanel Kurulumu",{"path":444,"title":445},"\u002Ftr\u002Fnext-js-on-bellegi-nasil-yenilenir-on-demand-cache-regeneration","Next.js Önbelleği Nasıl Yenilenir? \"On-Demand Cache Regeneration\"",{"path":447,"title":448},"\u002Ftr\u002Ftailwind-css-nerede-kullanilir-tailwind-css-nerede-kullanilmaz","Tailwind CSS Nerede Kullanılır? Tailwind CSS Nerede Kullanılmaz?",{"path":450,"title":451},"\u002Ftr\u002Fgo-veri-tipleri-struct","Go Veri Tipleri: Struct",{"path":453,"title":454},"\u002Ftr\u002Ftemplate-method-tasarim-deseni-nedir","Template Method Tasarım Deseni Nedir?",{"path":456,"title":457},"\u002Ftr\u002Fgarbage-collection-ve-golang","Garbage Collection ve Go (Golang)",{"path":459,"title":460},"\u002Ftr\u002Fes5-nedir","ES5 Nedir? JavaScript Geliştiricileri İçin Kılavuz",{"path":462,"title":463},"\u002Ftr\u002Fes16-nedir-ecmascript-2025-nedir","ES16 nedir? ECMAScript 2025 nedir?",{"path":465,"title":466},"\u002Ftr\u002Fyeni-tema-honeywind","Yeni WordPress Temam Honeywind: Tailwind CSS ve Minimalizm",[468,470,471,472],{"path":343,"title":344,"date":469},"2026-06-20",{"path":402,"title":403,"date":469},{"path":350,"title":351,"date":469},{"path":462,"title":463,"date":469},[474,476,478],{"path":414,"title":415,"date":475},"2023-10-14",{"path":375,"title":376,"date":477},"2021-10-05",{"path":354,"title":355,"date":479},"2021-10-04",1782141997474]