Modern web geli\u015ftirme d\u00fcnyas\u0131nda h\u0131z, verimlilik ve geli\u015ftirici deneyimi vazge\u00e7ilmez unsurlar haline geldi. Yava\u015f derleme s\u00fcreleri ve gecikmeli s\u0131cak mod\u00fcl de\u011fi\u015fimi (HMR) y\u00fcz\u00fcnden projelerinizin ilerlemesi sekteye mi u\u011fruyor? Bu makale, neden geleneksel derleyicilere veda edip Vite’\u0131n sundu\u011fu 10 kat daha h\u0131zl\u0131 derleme ve an\u0131nda HMR ile geli\u015ftirme s\u00fcre\u00e7lerinizi radikal bir \u015fekilde h\u0131zland\u0131rabilece\u011finizi detaylar\u0131yla a\u00e7\u0131kl\u0131yor.<\/p>\n

Web geli\u015ftirmenin temellerini atan HTML, CSS ve JavaScript \u00fc\u00e7l\u00fcs\u00fc, ilk zamanlarda basit ve do\u011frudan \u00e7al\u0131\u015f\u0131yordu. Ancak uygulamalar karma\u015f\u0131kla\u015ft\u0131k\u00e7a, taray\u0131c\u0131lar\u0131n hen\u00fcz desteklemedi\u011fi yeni JavaScript \u00f6zellikleri (ES Mod\u00fclleri gibi), TypeScript, Sass, Less gibi \u00f6ni\u015flemciler ve React, Vue, Svelte gibi modern \u00e7er\u00e7eveler ortaya \u00e7\u0131kt\u0131. \u0130\u015fte tam da bu noktada, taray\u0131c\u0131lar\u0131n anlayabilece\u011fi formata d\u00f6n\u00fc\u015ft\u00fcrme, ba\u011f\u0131ml\u0131l\u0131klar\u0131 y\u00f6netme, kodu k\u00fc\u00e7\u00fcltme ve optimize etme gibi g\u00f6revleri \u00fcstlenen “derleyicilere” (bundler) ihtiya\u00e7 duymaya ba\u015flad\u0131k.<\/p>\n

Geleneksel derleyiciler, \u00f6rne\u011fin Webpack, Parcel veya Rollup, projenizdeki t\u00fcm mod\u00fclleri tarar, ba\u011f\u0131ml\u0131l\u0131k grafi\u011fini olu\u015fturur ve geli\u015ftirme sunucusuna g\u00f6ndermeden \u00f6nce t\u00fcm kodu tek bir b\u00fcy\u00fck pakete (bundle) d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck projelerde, geli\u015ftirme sunucusunun ba\u015flamas\u0131 ve kodda yap\u0131lan k\u00fc\u00e7\u00fck bir de\u011fi\u015fikli\u011fin taray\u0131c\u0131ya yans\u0131mas\u0131 i\u00e7in gereken s\u00fcreyi inan\u0131lmaz derecede uzatabilir. Her k\u00fc\u00e7\u00fck de\u011fi\u015fiklikte t\u00fcm projenin yeniden derlenmesi gerekti\u011finden, geli\u015ftirici verimlili\u011fi ciddi \u015fekilde d\u00fc\u015fer. Yava\u015f ba\u015flang\u0131\u00e7 s\u00fcreleri ve gecikmeli HMR, geli\u015ftirme d\u00f6ng\u00fcs\u00fcn\u00fc aksat\u0131r ve yarat\u0131c\u0131l\u0131\u011f\u0131 engeller.<\/p>\n

Peki ya bir geli\u015ftirme sunucusunun ba\u015flamak i\u00e7in saniyeler yerine milisaniyeler s\u00fcrd\u00fc\u011f\u00fcn\u00fc, kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin an\u0131nda taray\u0131c\u0131ya yans\u0131d\u0131\u011f\u0131n\u0131 ve projenizin boyutu ne olursa olsun bu h\u0131z\u0131n korundu\u011funu hayal edin? \u0130\u015fte Vite tam olarak bunu sunar. Vite, geleneksel derleyicilerin aksine, geli\u015ftirme sunucusu s\u0131ras\u0131nda t\u00fcm uygulamay\u0131 \u00f6nceden derlemez. Bunun yerine, taray\u0131c\u0131lar\u0131n yerel ES Mod\u00fcl\u00fc (ESM) deste\u011finden faydalan\u0131r. Bu devrim niteli\u011findeki yakla\u015f\u0131m, geli\u015ftirme s\u0131ras\u0131nda sadece o an istenen mod\u00fclleri derleyerek ve taray\u0131c\u0131ya do\u011frudan g\u00f6ndererek “iste\u011fe ba\u011fl\u0131 derleme” prensibini benimser. Bu sayede, devasa bir JavaScript paketi olu\u015fturmak yerine, taray\u0131c\u0131 mod\u00fclleri yaln\u0131zca ihtiya\u00e7 duydu\u011funda a\u011f \u00fczerinden \u00e7eker. Sonu\u00e7? Geli\u015ftirme sunucusunun neredeyse an\u0131nda ba\u015flamas\u0131 ve HMR’nin \u0131\u015f\u0131k h\u0131z\u0131nda \u00e7al\u0131\u015fmas\u0131.<\/p>\n

\u00d6zetle, Vite sadece bir derleyici de\u011fil, ayn\u0131 zamanda modern web geli\u015ftirmenin kronik sorunlar\u0131na ak\u0131ll\u0131ca bir \u00e7\u00f6z\u00fcm sunan yeni nesil bir geli\u015ftirme arac\u0131d\u0131r. Bu, hem k\u00fc\u00e7\u00fck ki\u015fisel projelerden hem de b\u00fcy\u00fck \u00f6l\u00e7ekli kurumsal uygulamalardan faydalanabilecek bir paradigma de\u011fi\u015fimidir. Geli\u015ftirme s\u0131ras\u0131nda kaynak kodunuzu taray\u0131c\u0131n\u0131n yerel ES Mod\u00fcl\u00fc (ESM) yeteneklerini kullanarak do\u011frudan sunar. Bu strateji, geli\u015ftirme sunucusunun a\u00e7\u0131l\u0131\u015f h\u0131z\u0131n\u0131 ve s\u0131cak mod\u00fcl de\u011fi\u015fimi (HMR) performans\u0131n\u0131 k\u00f6kten iyile\u015ftirir.<\/p>\n

Uzman \u0130pucu: Vite’\u0131n temel g\u00fcc\u00fc, taray\u0131c\u0131lar\u0131n yerel ESM deste\u011fini kullanmas\u0131ndan gelir. Bu, taray\u0131c\u0131n\u0131n mod\u00fclleri do\u011frudan anlayabilece\u011fi ve i\u015fleyebilece\u011fi anlam\u0131na gelir, b\u00f6ylece derleyicinin a\u011f\u0131r i\u015f y\u00fck\u00fcn\u00fc hafifletir.<\/div>\n

Vite’\u0131n Performans Avantajlar\u0131: Neden 10 Kat Daha H\u0131zl\u0131 Derleme S\u00fcreleri Elde Ediyoruz?<\/h2>\n
Vite’\u0131n sundu\u011fu h\u0131z, sadece geli\u015ftirici deneyimi i\u00e7in bir l\u00fcks de\u011fil, ayn\u0131 zamanda modern web projelerinin karma\u015f\u0131kl\u0131\u011f\u0131yla ba\u015fa \u00e7\u0131kmak i\u00e7in kritik bir gerekliliktir. Peki, Vite bu performans\u0131 nas\u0131l sa\u011fl\u0131yor ve neden Webpack gibi rakiplerine k\u0131yasla g\u00f6zle g\u00f6r\u00fcl\u00fcr derecede daha h\u0131zl\u0131 derlemeler sunabiliyor? Cevap, Vite’\u0131n iki temel prensibinde yat\u0131yor: ESM tabanl\u0131 geli\u015ftirme sunucusu ve Rollup’\u0131n optimize edilmi\u015f \u00fcretim derlemesi.<\/p>\n

Geli\u015ftirme Sunucusunda Neden An\u0131nda Tepki Al\u0131r\u0131z?<\/h3>\n

Geleneksel derleyiciler, sunucu ba\u015flat\u0131ld\u0131\u011f\u0131nda t\u00fcm uygulaman\u0131z\u0131 derlemek zorundayd\u0131. Bu i\u015flem, binlerce mod\u00fcl i\u00e7eren b\u00fcy\u00fck projelerde dakikalar s\u00fcrebilirdi. Vite ise bu darbo\u011faz\u0131 ortadan kald\u0131r\u0131r. Taray\u0131c\u0131lar\u0131n yerel ECMAScript Mod\u00fclleri (ESM) deste\u011finden faydalanarak, geli\u015ftirme s\u0131ras\u0131nda kodunuzu derlemeden taray\u0131c\u0131ya servis eder. Bu, taray\u0131c\u0131n\u0131n do\u011frudan mod\u00fclleri talep etmesi ve indirmesi anlam\u0131na gelir, derleyicinin ba\u015ftan sona tek bir paket olu\u015fturma y\u00fck\u00fcn\u00fc ortadan kald\u0131r\u0131r. Vite, sadece o an aktif olan veya taray\u0131c\u0131 taraf\u0131ndan talep edilen mod\u00fclleri i\u015fler. \u00d6rne\u011fin, uygulaman\u0131z\u0131n ana giri\u015f noktas\u0131 olan main.js<\/code> dosyas\u0131n\u0131 a\u00e7t\u0131\u011f\u0131n\u0131zda, Vite yaln\u0131zca bu dosyay\u0131 ve onun do\u011frudan ba\u011f\u0131ml\u0131l\u0131klar\u0131n\u0131 i\u015fler. Di\u011fer mod\u00fcller ise ancak taray\u0131c\u0131 onlar\u0131 talep etti\u011finde (\u00f6rne\u011fin, bir bile\u015fen y\u00fcklendi\u011finde veya bir rota ziyaret edildi\u011finde) i\u015flenir. Bu “iste\u011fe ba\u011fl\u0131” yakla\u015f\u0131m, geli\u015ftirme sunucusunun ba\u015flat\u0131lma s\u00fcresini saniyelere, hatta milisaniyelere indirir.<\/p>\n

Buna ek olarak, Vite’\u0131n ba\u011f\u0131ml\u0131l\u0131k \u00f6n derleme stratejisi de \u00f6nemli bir rol oynar. Node_modules i\u00e7indeki \u00fc\u00e7\u00fcnc\u00fc taraf ba\u011f\u0131ml\u0131l\u0131klar genellikle y\u00fczlerce veya binlerce mod\u00fclden olu\u015fur. Vite, bu ba\u011f\u0131ml\u0131l\u0131klar\u0131 ba\u015flang\u0131\u00e7ta esbuild gibi ultra h\u0131zl\u0131 bir ara\u00e7 kullanarak tek bir pakete d\u00f6n\u00fc\u015ft\u00fcr\u00fcr. Bu, her taray\u0131c\u0131 yenilemesinde ba\u011f\u0131ml\u0131l\u0131klar\u0131n ayr\u0131 ayr\u0131 i\u015flenmesini engeller ve \u00e7ok daha h\u0131zl\u0131 bir deneyim sunar. \u00d6rne\u011fin, bir React projesinde react<\/code> ve react-dom<\/code> gibi paketler tek bir derlenmi\u015f mod\u00fcl olarak sunulur, bu da taray\u0131c\u0131 y\u00fck\u00fcn\u00fc ve a\u011f trafi\u011fini azalt\u0131r.<\/p>\n

\n  \/\/ vite.config.js - Vite'\u0131n esbuild ile ba\u011f\u0131ml\u0131l\u0131k \u00f6n derlemesi \u00f6rne\u011fi\n  import { defineConfig } from 'vite';\n  import react from '@vitejs\/plugin-react';\n\n  export default defineConfig({\n    plugins: [react()],\n    optimizeDeps: {\n      include: ['react', 'react-dom'], \/\/ Bu ba\u011f\u0131ml\u0131l\u0131klar \u00f6nceden derlenecektir\n      exclude: ['lodash-es'] \/\/ Bu ba\u011f\u0131ml\u0131l\u0131klar d\u0131\u015far\u0131da b\u0131rak\u0131labilir\n    }\n  });\n\n<\/pre>\n<\/code><\/p>\n
\u00dcretim Ortam\u0131nda H\u0131zl\u0131 Derlemeler Nas\u0131l Sa\u011flan\u0131yor?<\/h3>\nVite, geli\u015ftirme s\u0131ras\u0131nda h\u0131z\u0131 \u00f6ncelikli tutarken, \u00fcretim derlemesinde de kaliteden \u00f6d\u00fcn vermez. \u00dcretim i\u00e7in Vite, performans ve optimizasyon a\u00e7\u0131s\u0131ndan kendini kan\u0131tlam\u0131\u015f olan Rollup derleyicisini kullan\u0131r. Rollup, a\u011fa\u00e7 sallama (tree-shaking), kod b\u00f6lme (code splitting) ve geli\u015fmi\u015f optimizasyon teknikleriyle bilinir. Bu, nihai \u00fcretim derlemenizin k\u00fc\u00e7\u00fck, h\u0131zl\u0131 ve verimli olmas\u0131n\u0131 sa\u011flar. Vite, Rollup'\u0131n t\u00fcm g\u00fcc\u00fcn\u00fc, minimal konfig\u00fcrasyonla ve geli\u015ftirici dostu bir aray\u00fczle sunar. Yani, geli\u015ftirme s\u0131ras\u0131nda s\u00fcper h\u0131zl\u0131 bir deneyim ya\u015farken, \u00fcretimde de en iyi performans\u0131 elde edersiniz.<\/p>\n
Bir Webpack projesinden Vite'a ge\u00e7i\u015f yapan b\u00fcy\u00fck bir e-ticaret platformunun vaka analizi, Vite'\u0131n potansiyelini a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Proje, yakla\u015f\u0131k 1500 JavaScript mod\u00fcl\u00fc ve \u00e7ok say\u0131da React bile\u015feni i\u00e7eriyordu. Webpack ile geli\u015ftirme sunucusunun ba\u015flamas\u0131 45-60 saniye s\u00fcrerken, Vite'a ge\u00e7i\u015fle bu s\u00fcre 2-3 saniyeye d\u00fc\u015ft\u00fc. HMR'nin Webpack'teki 5-10 saniyelik gecikmesi ise Vite ile milisaniyelere indi. Bu, ekip i\u00e7in g\u00fcnl\u00fck geli\u015ftirme d\u00f6ng\u00fcs\u00fcnde saatler s\u00fcren bir zaman tasarrufu anlam\u0131na geldi ve geli\u015ftiricilerin daha yarat\u0131c\u0131 i\u015flere odaklanmas\u0131n\u0131 sa\u011flad\u0131. Ayr\u0131ca, \u00fcretim derleme s\u00fcreleri de %30 oran\u0131nda azalarak CI\/CD s\u00fcre\u00e7lerini h\u0131zland\u0131rd\u0131.<\/p>\n
Uzman \u0130pucu: Vite, geli\u015ftirme ve \u00fcretim i\u00e7in farkl\u0131 ara\u00e7lar\u0131 (esbuild ve Rollup) ak\u0131ll\u0131ca birle\u015ftirerek, her iki senaryoda da en iyi performans\u0131 sunar. Bu mod\u00fcler yakla\u015f\u0131m, geleneksel derleyicilerin tek bir ara\u00e7la her \u015feyi yapma \u00e7abas\u0131ndan daha verimlidir.<\/div>\nAn\u0131nda HMR ve Geli\u015ftirici Deneyimi: Vite Neden Oyunun Kurallar\u0131n\u0131 De\u011fi\u015ftiriyor?<\/h2>\nModern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan S\u0131cak Mod\u00fcl De\u011fi\u015fimi (HMR), kodunuzda yapt\u0131\u011f\u0131n\u0131z de\u011fi\u015fikliklerin taray\u0131c\u0131y\u0131 veya uygulaman\u0131n durumunu s\u0131f\u0131rlamadan an\u0131nda yans\u0131mas\u0131n\u0131 sa\u011flar. Bu \u00f6zellik, geli\u015ftirme s\u00fcrecini ak\u0131c\u0131 hale getirir, s\u00fcrekli tam sayfa yenilemeleriyle kaybedilen zaman\u0131 ve ba\u011flam\u0131 geri kazand\u0131r\u0131r. Ancak geleneksel derleyicilerde HMR genellikle yava\u015f veya tutars\u0131z \u00e7al\u0131\u015fabilir, \u00f6zellikle b\u00fcy\u00fck projelerde. \u0130\u015fte Vite, HMR deneyimini bamba\u015fka bir seviyeye ta\u015f\u0131yarak geli\u015ftirici verimlili\u011fini devrim niteli\u011finde art\u0131r\u0131r.<\/p>\n
H\u0131zl\u0131 Mod\u00fcl De\u011fi\u015fimi (HMR) Geli\u015ftirici Verimlili\u011fini Nas\u0131l Art\u0131r\u0131r?<\/h3>\nVite'\u0131n HMR sistemi, ES Mod\u00fcllerinin \u00fczerine in\u015fa edildi\u011fi i\u00e7in inan\u0131lmaz derecede h\u0131zl\u0131d\u0131r. Bir mod\u00fclde de\u011fi\u015fiklik yapt\u0131\u011f\u0131n\u0131zda, Vite yaln\u0131zca o belirli mod\u00fcl\u00fc ve onun ba\u011f\u0131ml\u0131 oldu\u011fu mod\u00fclleri yeniden derler (ancak ger\u00e7ek anlamda bir \"derleme\" de\u011fildir, sadece mod\u00fcl\u00fcn yenilenmi\u015f halini taray\u0131c\u0131ya g\u00f6nderir). T\u00fcm mod\u00fcl grafi\u011fini yeniden olu\u015fturmak yerine, sadece etkilenen k\u00fc\u00e7\u00fck par\u00e7alar\u0131 g\u00fcnceller. Bu, de\u011fi\u015fikliklerin taray\u0131c\u0131da neredeyse an\u0131nda g\u00f6r\u00fclmesini sa\u011flar, genellikle 100ms'nin alt\u0131nda. \u00d6rne\u011fin, bir React bile\u015fenindeki k\u00fc\u00e7\u00fck bir stil de\u011fi\u015fikli\u011fi veya bir prop g\u00fcncellemesi an\u0131nda yans\u0131r, uygulaman\u0131z\u0131n mevcut durumu (\u00f6rne\u011fin, bir formun doldurulmu\u015f hali veya bir modal\u0131n a\u00e7\u0131k hali) korunur.<\/p>\n
Bu anl\u0131k geri bildirim d\u00f6ng\u00fcs\u00fc, geli\u015ftiricilerin \"ak\u0131\u015f\" (flow state) i\u00e7inde kalmas\u0131na yard\u0131mc\u0131 olur. Bir tasar\u0131m veya i\u015flevsellik \u00fczerinde \u00e7al\u0131\u015f\u0131rken, her de\u011fi\u015fiklikten sonra beklemek zorunda kalmamak, yarat\u0131c\u0131l\u0131\u011f\u0131 art\u0131r\u0131r ve deneme yapma cesaretini te\u015fvik eder. HMR'nin performans\u0131, \u00f6zellikle g\u00f6rsel odakl\u0131 \u00e7al\u0131\u015fmalarda (UI\/UX geli\u015ftirme) veya karma\u015f\u0131k state y\u00f6netimi olan uygulamalarda kritik \u00f6neme sahiptir. Vite ile, CSS de\u011fi\u015fiklikleri de an\u0131nda yans\u0131r, bu da stil \u00fczerinde \u00e7al\u0131\u015fmay\u0131 \u00e7ok daha keyifli hale getirir.<\/p>\n
\n  \/\/ src\/components\/MyButton.jsx\n  import React, { useState } from 'react';\n\n  function MyButton() {\n    const [count, setCount] = useState(0);\n\n    return (\n