Modern web uygulamalar\u0131, \u00f6zellikle dashboardlar, zengin \u00f6zellikler ve interaktif deneyimler sunarken, s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir problemle y\u00fczle\u015firiz: Y\u00fcksek bundle boyutu ve yava\u015f y\u00fckleme s\u00fcreleri. Bu makalede, ger\u00e7ek bir vaka analiziyle, dashboardunuzun bundle boyutunu 1.72 MB’dan sadece 299 KB’a nas\u0131l d\u00fc\u015f\u00fcrebilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Geli\u015ftirici deneyimini iyile\u015ftiren ve kullan\u0131c\u0131ya daha h\u0131zl\u0131 bir deneyim sunan bu optimizasyon yolculu\u011funa haz\u0131rsan\u0131z, ba\u015flayal\u0131m.<\/p>\n
G\u00fcn\u00fcm\u00fcz\u00fcn rekabet\u00e7i dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n sabr\u0131 olduk\u00e7a k\u0131s\u0131tl\u0131d\u0131r. Yava\u015f y\u00fcklenen bir web sitesi veya dashboard, kullan\u0131c\u0131 deneyimini (UX) do\u011frudan olumsuz etkileyerek, potansiyel m\u00fc\u015fteri veya kullan\u0131c\u0131 kayb\u0131na yol a\u00e7abilir. Peki, “bundle boyutu” tam olarak nedir ve neden bu kadar b\u00fcy\u00fck bir etkiye sahiptir? Basit\u00e7e ifade etmek gerekirse, bundle boyutu, web uygulaman\u0131z\u0131n taray\u0131c\u0131ya g\u00f6nderdi\u011fi t\u00fcm JavaScript, CSS ve di\u011fer varl\u0131klar\u0131n (assets) toplam boyutunu ifade eder. Bu dosya ne kadar b\u00fcy\u00fck olursa, indirilmesi ve taray\u0131c\u0131 taraf\u0131ndan i\u015flenmesi o kadar uzun s\u00fcrer.<\/p>\n
Y\u00fcksek bundle boyutunun do\u011frudan sonu\u00e7lar\u0131 aras\u0131nda, sayfa y\u00fckleme s\u00fcrelerinin artmas\u0131, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131lar\u0131n bekleme s\u00fcresinin uzamas\u0131 yer al\u0131r. Bu durum, mobil veri kullan\u0131m maliyetlerini de art\u0131rabilir, bu da kullan\u0131c\u0131lar i\u00e7in ek bir dezavantajd\u0131r. Ayr\u0131ca, Google gibi arama motorlar\u0131, web sitesi performans\u0131n\u0131 (\u00f6zellikle Core Web Vitals metriklerini) s\u0131ralama fakt\u00f6rleri aras\u0131nda \u00f6nemli bir yere koymaktad\u0131r. Daha h\u0131zl\u0131 y\u00fcklenen bir dashboard, hem SEO performans\u0131n\u0131z\u0131 art\u0131r\u0131r hem de kullan\u0131c\u0131lar\u0131n arad\u0131klar\u0131 bilgiye daha h\u0131zl\u0131 ula\u015fmas\u0131n\u0131 sa\u011flayarak genel memnuniyeti y\u00fckseltir. \u0130\u015f a\u00e7\u0131s\u0131ndan bak\u0131ld\u0131\u011f\u0131nda, daha h\u0131zl\u0131 bir dashboard, daha y\u00fcksek d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131, daha uzun oturum s\u00fcreleri ve genel olarak daha iyi bir i\u015f performans\u0131 anlam\u0131na gelir.<\/p>\n
Ba\u015flang\u0131\u00e7ta kar\u015f\u0131la\u015ft\u0131\u011f\u0131m\u0131z sorun, \u00f6nemli bir i\u00e7 dashboard uygulamas\u0131n\u0131n ilk y\u00fckleme s\u00fcresinin kabul edilemez derecede yava\u015f olmas\u0131yd\u0131. Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 (\u00f6zellikle Chrome DevTools’un Network sekmesini) kullanarak yapt\u0131\u011f\u0131m ilk incelemelerde, ana JavaScript bundle dosyas\u0131n\u0131n 1.72 MB boyutunda oldu\u011funu ve bu durumun uygulaman\u0131n etkile\u015fimli hale gelme s\u00fcresini (Time to Interactive) ciddi \u015fekilde uzatt\u0131\u011f\u0131n\u0131 g\u00f6rd\u00fcm. Bu boyut, modern web standartlar\u0131na g\u00f6re olduk\u00e7a fazlayd\u0131 ve acil m\u00fcdahale gerektiriyordu. Bu durum, sadece m\u00fchendislik ekibimizin de\u011fil, ayn\u0131 zamanda dashboard’u kullanan t\u00fcm ekiplerin \u00fcretkenli\u011fini etkileyen kritik bir performansa i\u015faret ediyordu. \u0130\u015fte bu noktada, kapsaml\u0131 bir optimizasyon yolculu\u011funa \u00e7\u0131kma karar\u0131 ald\u0131k.<\/p>\n
Bir optimizasyon s\u00fcrecine ba\u015flarken, mevcut durumu do\u011fru bir \u015fekilde anlamak ve darbo\u011fazlar\u0131 tespit etmek kritik \u00f6neme sahiptir. Bu, hedeflenen iyile\u015ftirmelerin do\u011fru noktalara odaklanmas\u0131n\u0131 sa\u011flar ve \u00e7abalar\u0131n bo\u015fa gitmesini engeller. Benim durumumda da ilk ad\u0131m, b\u00fcy\u00fck bundle boyutuna neyin sebep oldu\u011funu net bir \u015fekilde ortaya koymakt\u0131. Bunun i\u00e7in \u00e7e\u015fitli ara\u00e7lar ve teknikler kulland\u0131m. \u00d6ncelikle, projemizde Webpack kullan\u0131ld\u0131\u011f\u0131 i\u00e7in, Webpack Bundle Analyzer<\/a>‘\u0131 devreye soktum. Bu ara\u00e7, uygulaman\u0131z\u0131n nihai bundle’\u0131n\u0131 interaktif bir a\u011fa\u00e7 haritas\u0131 (treemap) \u015feklinde g\u00f6rselle\u015ftirerek, hangi mod\u00fcl\u00fcn ne kadar yer kaplad\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6rmenizi sa\u011flar. Bu, bundle boyutunu azaltmaya y\u00f6nelik en de\u011ferli ilk ad\u0131mlardan biridir.<\/p>\n Webpack Bundle Analyzer’\u0131 projenize entegre etmek olduk\u00e7a basittir. Genellikle, Webpack yap\u0131land\u0131rma dosyan\u0131za bir eklenti (plugin) olarak eklemeniz yeterlidir. A\u015fa\u011f\u0131daki gibi bir yap\u0131land\u0131rma ile ba\u015flayabilirsiniz:<\/p>\n <\/code><\/p>\n Bu yap\u0131land\u0131rma ile, \u00fcretim (production) derlemesini (build) her \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zda, size detayl\u0131 bir bundle raporu sunan bir HTML dosyas\u0131 olu\u015fur. Bu raporu inceledi\u011fimde, beni en \u00e7ok \u015fa\u015f\u0131rtan, uygulaman\u0131n kulland\u0131\u011f\u0131 baz\u0131 pop\u00fcler k\u00fct\u00fcphanelerin (\u00f6rne\u011fin, bir grafik k\u00fct\u00fcphanesi ve tarih i\u015fleme k\u00fct\u00fcphanesi olan Moment.js'in tamam\u0131) boyutlar\u0131n\u0131n beklentimin \u00e7ok \u00fczerinde olmas\u0131yd\u0131. \u00d6zellikle Moment.js'in, kullanmad\u0131\u011f\u0131m\u0131z yerel ayar (locale) dosyalar\u0131n\u0131 da bundle'a dahil etmesi, gereksiz \u015fi\u015fkinli\u011fe yol a\u00e7\u0131yordu. Ayr\u0131ca, baz\u0131 bile\u015fenlerimizin veya sayfalar\u0131m\u0131z\u0131n sadece belirli durumlarda kullan\u0131lmas\u0131na ra\u011fmen, t\u00fcm kodlar\u0131n\u0131n ba\u015flang\u0131\u00e7ta y\u00fckleniyor olmas\u0131 da tespit etti\u011fim bir ba\u015fka \u00f6nemli sorundu.<\/p>\n Bu analiz a\u015famas\u0131nda, kullan\u0131lmayan kodlar\u0131 (dead code) ve b\u00fcy\u00fck ba\u011f\u0131ml\u0131l\u0131klar\u0131 tespit etmek, optimizasyon stratejimi belirlememde kilit rol oynad\u0131. Geli\u015ftirici ara\u00e7lar\u0131ndaki \"Coverage\" sekmesi de, uygulaman\u0131n hangi JavaScript ve CSS kodlar\u0131n\u0131n ger\u00e7ekte kullan\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6rmeme yard\u0131mc\u0131 oldu. E\u011fer bir kod blo\u011funun rengi k\u0131rm\u0131z\u0131 ise, o k\u0131s\u0131m sayfada hi\u00e7 \u00e7al\u0131\u015fmam\u0131\u015f demektir; bu da potansiyel bir dead code sinyalidir. Bu ara\u00e7lar sayesinde, projenin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131 ne olursa olsun, boyut art\u0131\u015f\u0131na neden olan temel fakt\u00f6rleri h\u0131zla belirleyebilir ve sonraki ad\u0131mlar\u0131m\u0131 buna g\u00f6re \u015fekillendirebilirim.<\/p>\n Uzman \u0130pucu: Bundle analiz raporlar\u0131n\u0131 d\u00fczenli olarak incelemek, yeni eklenen ba\u011f\u0131ml\u0131l\u0131klar\u0131n veya kod de\u011fi\u015fikliklerinin bundle boyutunu nas\u0131l etkiledi\u011fini anlamak i\u00e7in harika bir yoldur. Bu, performans regresyonlar\u0131n\u0131 erken a\u015famada yakalaman\u0131z\u0131 sa\u011flar.<\/p>\n \u00d6rne\u011fin, bir veri g\u00f6rselle\u015ftirme dashboardunda, D3.js veya ECharts gibi k\u00fct\u00fcphaneler s\u0131kl\u0131kla kullan\u0131l\u0131r. Bu k\u00fct\u00fcphaneler, \u00e7ok say\u0131da mod\u00fcl i\u00e7erir ve bazen ihtiyac\u0131m\u0131z olmayan t\u00fcm fonksiyonelli\u011fi i\u00e7e aktar\u0131r\u0131z. Bundle Analyzer raporu sayesinde, hangi D3.js mod\u00fcllerinin ger\u00e7ekten kullan\u0131ld\u0131\u011f\u0131n\u0131 tespit ettim ve sadece gerekli olanlar\u0131 i\u00e7e aktarman\u0131n yollar\u0131n\u0131 ara\u015ft\u0131rd\u0131m. Bu ilk analiz ad\u0131m\u0131, 1.72 MB'l\u0131k bir bundle'\u0131n neden bu kadar b\u00fcy\u00fck oldu\u011funu net bir \u015fekilde anlamam\u0131 sa\u011flad\u0131 ve sonraki optimizasyon ad\u0131mlar\u0131m i\u00e7in sa\u011flam bir temel olu\u015fturdu.<\/p>\n Mevcut durumu analiz ettikten ve bundle'\u0131m\u0131z\u0131 \u015fi\u015firen ana su\u00e7lular\u0131 tespit ettikten sonra, s\u0131ra aksiyon almaya geldi. Bu b\u00f6l\u00fcmde, Webpack ve di\u011fer modern geli\u015ftirme ara\u00e7lar\u0131yla bundle boyutunu nas\u0131l etkili bir \u015fekilde azaltabilece\u011fimize dair en \u00f6nemli teknikleri detayland\u0131raca\u011f\u0131m. Her bir teknik, gereksiz kodu eleyerek, kodlar\u0131 daha verimli y\u00fckleyerek veya varl\u0131klar\u0131n boyutunu k\u00fc\u00e7\u00fclterek genel performansa katk\u0131da bulunur.<\/p>\n Tree Shaking, modern JavaScript projelerinde bundle boyutunu k\u00fc\u00e7\u00fcltmek i\u00e7in kullan\u0131lan en g\u00fc\u00e7l\u00fc tekniklerden biridir. Temel olarak, uygulaman\u0131zda ger\u00e7ekten kullan\u0131lmayan JavaScript kodlar\u0131n\u0131 (dead code) bundle'dan \u00e7\u0131karma i\u015flemidir. Bu teknik, \u00f6zellikle \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphanelerin tamam\u0131n\u0131 i\u00e7e aktarmak yerine sadece ihtiyac\u0131m\u0131z olan k\u0131s\u0131mlar\u0131n\u0131 kullanmam\u0131za olanak tan\u0131r. \u00d6rne\u011fin, bir yard\u0131mc\u0131 (utility) k\u00fct\u00fcphanesi olan Lodash'ten sadece birka\u00e7 fonksiyon kullan\u0131yorsan\u0131z, k\u00fct\u00fcphanenin tamam\u0131n\u0131 dahil etmek yerine sadece o fonksiyonlar\u0131 i\u00e7e aktarmak, bundle boyutunda \u00f6nemli bir azalma sa\u011flar.<\/p>\n Tree Shaking'in etkili olabilmesi i\u00e7in kodunuzun ES Mod\u00fcl (ESM) syntax'\u0131 ( <\/code><\/p>\n Bu basit de\u011fi\u015fiklik, t\u00fcm Lodash k\u00fct\u00fcphanesini bundle'\u0131n\u0131za dahil etmek yerine, sadece Code Splitting, uygulaman\u0131z\u0131n JavaScript bundle'\u0131n\u0131 daha k\u00fc\u00e7\u00fck par\u00e7alara (chunk'lara) b\u00f6lme tekni\u011fidir. Bu par\u00e7alar, uygulaman\u0131n tamam\u0131 ba\u015flang\u0131\u00e7ta y\u00fcklenmek yerine, yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda (\u00f6rne\u011fin, bir kullan\u0131c\u0131 belirli bir sayfay\u0131 ziyaret etti\u011finde veya bir mod\u00fcl\u00fc a\u00e7t\u0131\u011f\u0131nda) y\u00fcklenir. Bu sayede, ilk sayfa y\u00fckleme s\u00fcresi \u00f6nemli \u00f6l\u00e7\u00fcde azal\u0131r, \u00e7\u00fcnk\u00fc taray\u0131c\u0131n\u0131n indirmesi ve i\u015flemesi gereken JavaScript miktar\u0131 \u00e7ok daha az olur.<\/p>\n Webpack, dinamik <\/code><\/p>\n Vaka analizimde, dashboard'un birden fazla sekmesi ve her sekmenin kendi i\u00e7inde karma\u015f\u0131k grafikler ve tablolar bar\u0131nd\u0131rd\u0131\u011f\u0131 bir senaryo vard\u0131. Her bir sekmenin i\u00e7eri\u011fini, yaln\u0131zca kullan\u0131c\u0131 o sekmeyi se\u00e7ti\u011finde y\u00fcklenecek \u015fekilde ayarlad\u0131m. \u00d6rne\u011fin, \"Finansal Raporlar\" sekmesi sadece kullan\u0131c\u0131 bu sekmeye t\u0131klad\u0131\u011f\u0131nda y\u00fcklendi, bu da ilk y\u00fckleme s\u0131ras\u0131nda ana bundle'\u0131n boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azaltt\u0131. Bu strateji, ana bundle boyutunu d\u00fc\u015f\u00fcrmede en b\u00fcy\u00fck katk\u0131lardan birini sa\u011flad\u0131 ve 1.72 MB'dan 299 KB'a d\u00fc\u015f\u00fc\u015f\u00fcn temel ta\u015flar\u0131ndan biri oldu.<\/p>\n JavaScript ve CSS optimizasyonunun yan\u0131 s\u0131ra, g\u00f6rseller ve web fontlar\u0131 gibi di\u011fer varl\u0131klar da bundle boyutunu ve y\u00fckleme s\u00fcrelerini ciddi \u015fekilde etkileyebilir. \u00d6zellikle bir dashboard'da \u00e7ok say\u0131da ikon, logo veya veri g\u00f6rselle\u015ftirme \u00f6\u011fesi kullan\u0131l\u0131yorsa, bunlar\u0131n boyutlar\u0131 birikir ve \u00f6nemli bir y\u00fck olu\u015fturur.<\/p>\n Vaka analizimde, dashboard'da kullan\u0131lan t\u00fcm ikonlar\u0131 tek bir SVG sprite dosyas\u0131na birle\u015ftirdim. Ayr\u0131ca, t\u00fcm g\u00f6rselleri optimize ettim ve WebP format\u0131na d\u00f6n\u00fc\u015ft\u00fcrd\u00fcm. Fontlar i\u00e7in ise sadece kullan\u0131lan karakter setlerini i\u00e7eren WOFF2 format\u0131nda subset'ler olu\u015fturdum. Bu ad\u0131mlar, yakla\u015f\u0131k 150 KB'l\u0131k bir tasarruf sa\u011flayarak, toplam bundle boyutunun daha da d\u00fc\u015fmesine yard\u0131mc\u0131 oldu.<\/p>\n <\/code><\/p>\n Uzman \u0130pucu: Dashboard'unuzda \u00e7ok say\u0131da k\u00fc\u00e7\u00fck g\u00f6rsel kullan\u0131yorsan\u0131z, bunlar\u0131 CSS sprite'lar\u0131 veya Base64 olarak kodlanm\u0131\u015f veri URI'lar\u0131 kullanarak tek bir dosya alt\u0131nda birle\u015ftirmek, HTTP istek say\u0131s\u0131n\u0131 azaltarak performans\u0131 art\u0131rabilir.<\/p>\n Yukar\u0131daki temel optimizasyon ad\u0131mlar\u0131yla bundle boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde k\u00fc\u00e7\u00fcltt\u00fckten sonra, daha da ileri gitmek ve performans\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in baz\u0131 geli\u015fmi\u015f tekniklere odaklanabiliriz. Bu teknikler genellikle sunucu taraf\u0131 yap\u0131land\u0131rmalar\u0131n\u0131 ve taray\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 manip\u00fcle etmeyi i\u00e7erir.<\/p>\n Uygulaman\u0131z\u0131n JavaScript, CSS ve HTML dosyalar\u0131n\u0131 taray\u0131c\u0131ya g\u00f6ndermeden \u00f6nce sunucu d\u00fczeyinde s\u0131k\u0131\u015ft\u0131rmak, transfer boyutunu daha da azaltman\u0131n en etkili yollar\u0131ndan biridir. Gzip, uzun zamand\u0131r end\u00fcstri standard\u0131 olan bir s\u0131k\u0131\u015ft\u0131rma algoritmas\u0131d\u0131r ve modern sunucular\u0131n \u00e7o\u011fu (Nginx, Apache, IIS) bunu destekler. Ancak, g\u00fcn\u00fcm\u00fczde daha yeni ve daha verimli bir algoritma olan Brotli, Gzip'ten ortalama %15-20 daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunmaktad\u0131r. Bu, \u00f6zellikle b\u00fcy\u00fck bundle'lar i\u00e7in ciddi bir fark yarat\u0131r.<\/p>\n Sunucunuzda Gzip veya Brotli'yi etkinle\u015ftirmek genellikle basit bir yap\u0131land\u0131rma de\u011fi\u015fikli\u011fi gerektirir. \u00d6rne\u011fin, Nginx i\u00e7in:<\/p>\n <\/code><\/p>\n Bu s\u0131k\u0131\u015ft\u0131rma y\u00f6ntemleri, bundle'\u0131n\u0131z\u0131n disk \u00fczerindeki boyutunu de\u011fi\u015ftirmez, ancak a\u011f \u00fczerinden aktar\u0131lan (transfer size) boyutunu ciddi \u015fekilde k\u00fc\u00e7\u00fclt\u00fcr. 1.72 MB'l\u0131k dosyam\u0131n 299 KB'a d\u00fc\u015f\u00fcr\u00fclmesinde, hem kod optimizasyonlar\u0131 hem de sunucu taraf\u0131 Brotli s\u0131k\u0131\u015ft\u0131rmas\u0131n\u0131n b\u00fcy\u00fck rol\u00fc oldu.<\/p>\n Kullan\u0131c\u0131lar dashboard'unuzu tekrar ziyaret ettiklerinde veya uygulaman\u0131n farkl\u0131 b\u00f6l\u00fcmlerine ge\u00e7ti\u011finde, ayn\u0131 varl\u0131klar\u0131n tekrar indirilmesini \u00f6nlemek i\u00e7in taray\u0131c\u0131 \u00f6nbellekleme hayati \u00f6neme sahiptir. Do\u011fru Genellikle, statik varl\u0131klar (JavaScript, CSS, g\u00f6rseller) i\u00e7in uzun s\u00fcreli \u00f6nbellekleme stratejileri (\u00f6rne\u011fin, bir y\u0131l) uygulan\u0131r. Dosya de\u011fi\u015fti\u011finde, Webpack'in dosya adlar\u0131na ekledi\u011fi hash'ler (\u00f6rn: <\/code><\/p>\n Ayr\u0131ca, \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011flar\u0131 (CDN'ler) kullanmak da performans\u0131 art\u0131r\u0131r. CDN'ler, dosyalar\u0131n\u0131z\u0131 co\u011frafi olarak kullan\u0131c\u0131lara daha yak\u0131n sunucularda \u00f6nbelle\u011fe alarak, gecikmeyi azalt\u0131r ve y\u00fckleme s\u00fcrelerini h\u0131zland\u0131r\u0131r. Bu, \u00f6zellikle k\u00fcresel kullan\u0131c\u0131 taban\u0131na sahip dashboardlar i\u00e7in vazge\u00e7ilmez bir stratejidir. CDN'ler, sadece bundle boyutuna dolayl\u0131 olarak etki etse de, da\u011f\u0131t\u0131m h\u0131z\u0131n\u0131 art\u0131rarak genel kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n Bazen kulland\u0131\u011f\u0131m\u0131z k\u00fct\u00fcphanelerin tamam\u0131n\u0131 i\u00e7e aktarmak yerine, sadece ihtiyac\u0131m\u0131z olan mod\u00fclleri veya daha hafif alternatiflerini kullanmak, bundle boyutunu daha da k\u00fc\u00e7\u00fcltebilir. \u00d6rne\u011fin, karma\u015f\u0131k bir tarih i\u015fleme k\u00fct\u00fcphanesi yerine, sadece tarih formatlama ihtiyac\u0131n\u0131z varsa Dashboard'lar art\u0131k sadece masa\u00fcst\u00fc cihazlarda de\u011fil, tabletler ve ak\u0131ll\u0131 telefonlarda da s\u0131kl\u0131kla kullan\u0131l\u0131yor. Bu y\u00fczden, mobil uyumluluk sadece tasar\u0131m esteti\u011fiyle ilgili de\u011fil, ayn\u0131 zamanda performansla da do\u011frudan ili\u015fkilidir. Mobil cihazlar genellikle daha k\u0131s\u0131tl\u0131 i\u015flem g\u00fcc\u00fcne ve daha yava\u015f a\u011f ba\u011flant\u0131lar\u0131na sahiptir. Bu nedenle, dashboard'unuzun mobil versiyonu i\u00e7in daha hafif bile\u015fenler kullanmak veya belirli \u00f6\u011feleri mobil'de gizlemek \u00f6nemlidir.<\/p>\n CSS medya sorgular\u0131 ( <\/code><\/p>\n Bu stratejiler bir araya geldi\u011finde, dashboard'unuzun sadece bundle boyutunu k\u00fc\u00e7\u00fcltmekle kalmay\u0131p, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini ve genel eri\u015filebilirli\u011fini de art\u0131rm\u0131\u015f olursunuz. Her bir teknik, kendi ba\u015f\u0131na k\u00fc\u00e7\u00fck bir etki yaratabilir, ancak birle\u015fti\u011finde 1.72 MB'dan 299 KB'a d\u00fc\u015f\u00fc\u015f gibi dramatik sonu\u00e7lar elde etmek m\u00fcmk\u00fcnd\u00fcr.<\/p>\n Bu optimizasyon yolculu\u011fu, dashboard'umuzun ba\u015flang\u0131\u00e7taki 1.72 MB'l\u0131k devasa bundle boyutunu sadece 299 KB'a d\u00fc\u015f\u00fcrmekle kalmad\u0131, ayn\u0131 zamanda kullan\u0131c\u0131 deneyiminde ve i\u015f performans\u0131nda g\u00f6zle g\u00f6r\u00fcl\u00fcr iyile\u015fmeler sa\u011flad\u0131. Art\u0131k dashboard'umuz, \u00e7ok daha h\u0131zl\u0131 y\u00fckl\u00fcyor, mobil cihazlarda dahi ak\u0131c\u0131 bir performans sunuyor ve kullan\u0131c\u0131lar\u0131n i\u015flerini daha verimli yapmalar\u0131na olanak tan\u0131yor. Bu ba\u015far\u0131, sadece tek bir sihirli de\u011fnekle de\u011fil, kapsaml\u0131 bir analiz, do\u011fru ara\u00e7lar\u0131n kullan\u0131m\u0131 ve ad\u0131m ad\u0131m uygulanan bir dizi optimizasyon tekni\u011fiyle m\u00fcmk\u00fcn oldu.<\/p>\n \u00d6zetle, bu s\u00fcre\u00e7te elde etti\u011fimiz temel kazan\u0131mlar \u015funlard\u0131r:<\/p>\n Bu s\u00fcrecin sonunda anlad\u0131m ki, web performans\u0131 bir kerelik bir g\u00f6rev de\u011fil, s\u00fcrekli bir s\u00fcre\u00e7tir. Yeni \u00f6zellikler eklendik\u00e7e, yeni k\u00fct\u00fcphaneler dahil edildik\u00e7e veya kod taban\u0131 b\u00fcy\u00fcd\u00fck\u00e7e, bundle boyutu tekrar artma e\u011filiminde olabilir. Bu nedenle, d\u00fczenli performans denetimleri yapmak, derleme s\u00fcre\u00e7lerine performans metriklerini dahil etmek ve geli\u015ftirme ekibini performans bilinci konusunda e\u011fitmek, uzun vadeli ba\u015far\u0131 i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n Soru 1: Bundle boyutunu \u00e7ok k\u00fc\u00e7\u00fcltmek performans kayb\u0131na neden olabilir mi?<\/strong> Soru 2: Webpack d\u0131\u015f\u0131nda ba\u015fka hangi ara\u00e7lar\u0131 kullanabilirim?<\/strong> Soru 3: Her proje i\u00e7in bu kadar detayl\u0131 optimizasyon gerekli mi?<\/strong> Soru 4: Lazy loading SEO'yu olumsuz etkiler mi?<\/strong> Soru 5: Hangi s\u0131k\u0131\u015ft\u0131rma format\u0131 (Gzip vs Brotli) daha iyidir?<\/strong> <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131, \u00f6zellikle dashboardlar, zengin \u00f6zellikler ve interaktif deneyimler sunarken, s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan bir problemle y\u00fczle\u015firiz: Y\u00fcksek bundle…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33306","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n\n\/\/ webpack.config.js\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = {\n \/\/ ... di\u011fer Webpack ayarlar\u0131\n plugins: [\n new BundleAnalyzerPlugin({\n analyzerMode: 'static', \/\/ Statik bir HTML dosyas\u0131 olu\u015fturur\n reportFilename: 'bundle-report.html', \/\/ Rapor dosyas\u0131n\u0131n ad\u0131\n openAnalyzer: true, \/\/ Taray\u0131c\u0131da raporu otomatik a\u00e7ar\n }),\n ],\n};\n<\/pre>\nWebpack ve Di\u011fer Ara\u00e7larla Bundle Boyutunu Azaltma Teknikleri Nelerdir?<\/h2>\n
Tree Shaking ve Dead Code Elimination: Gereksiz Kodlar\u0131 Ay\u0131klama<\/h3>\n
import<\/code> ve export<\/code> ifadeleri) kullan\u0131larak yaz\u0131lm\u0131\u015f olmas\u0131 ve Webpack gibi bir bundler'\u0131n \u00fcretim modunda (mode: 'production'<\/code>) \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gerekir. Webpack, bu modda varsay\u0131lan olarak \u00e7e\u015fitli optimizasyonlar yapar, buna Tree Shaking de dahildir. Ayr\u0131ca, kulland\u0131\u011f\u0131n\u0131z k\u00fct\u00fcphanelerin package.json<\/code> dosyalar\u0131nda \"sideEffects\": false<\/code> veya belirli dosyalara i\u015faret eden bir diziye sahip olmas\u0131 da \u00f6nemlidir. Bu, Webpack'e, belirli mod\u00fcllerin yan etkileri olmad\u0131\u011f\u0131n\u0131 ve kullan\u0131lmad\u0131klar\u0131 takdirde g\u00fcvenle kald\u0131r\u0131labilece\u011fini s\u00f6yler.<\/p>\n\n\/\/ ES Mod\u00fcllerini kullanarak sadece ihtiyac\u0131n\u0131z olan fonksiyonu i\u00e7e aktar\u0131n\nimport { get } from 'lodash-es'; \/\/ Lodash'in ES mod\u00fcl versiyonunu kullan\u0131r\n\n\/\/ E\u011fer eski Lodash paketi kullan\u0131yorsan\u0131z, belirli bir yolu hedefleyin\n\/\/ import get from 'lodash\/get'; \/\/ Baz\u0131 k\u00fct\u00fcphaneler i\u00e7in bu syntax da i\u015fe yarar\n<\/pre>\nget<\/code> fonksiyonunun kodunu getirir. Benim vaka analizimde, Moment.js gibi b\u00fcy\u00fck bir tarih k\u00fct\u00fcphanesinin de benzer \u015fekilde ele al\u0131nmas\u0131 gerekti. Moment.js genellikle t\u00fcm yerel ayar (locale) dosyalar\u0131n\u0131 da bundle'a dahil eder, bu da gereksiz \u015fi\u015fkinli\u011fe yol a\u00e7ar. Moment.js yerine daha hafif bir alternatif olan date-fns<\/a> veya sadece belirli yerel ayarlar\u0131 i\u00e7e aktaran Moment.js eklentilerini kullanmak, bu sorunu \u00e7\u00f6zmede yard\u0131mc\u0131 oldu.<\/p>\nCode Splitting ve Lazy Loading: \u0130htiya\u00e7 An\u0131nda Y\u00fckleme<\/h3>\n
import()<\/code> s\u00f6zdizimi sayesinde Code Splitting'i do\u011fal olarak destekler. React gibi modern front-end k\u00fct\u00fcphaneleriyle birlikte kullan\u0131ld\u0131\u011f\u0131nda, React.lazy()<\/code> ve Suspense<\/code> bile\u015fenleri, lazy loading'i bile\u015fen d\u00fczeyinde kolayca uygulaman\u0131za olanak tan\u0131r. Bu, \u00f6zellikle dashboard uygulamalar\u0131nda farkl\u0131 sekmeler, paneller veya karma\u015f\u0131k raporlama mod\u00fclleri gibi, ilk y\u00fcklemede g\u00f6sterilmeyen ancak gerekti\u011finde eri\u015filen k\u0131s\u0131mlar i\u00e7in \u00e7ok etkilidir.<\/p>\n\n\/\/ React.lazy ve Suspense ile lazy loading \u00f6rne\u011fi\nimport React, { lazy, Suspense } from 'react';\n\n\/\/ Dinamik olarak y\u00fcklenecek bir bile\u015fen tan\u0131mlay\u0131n\nconst DashboardChart = lazy(() => import('.\/DashboardChart'));\nconst AdminPanel = lazy(() => import('.\/AdminPanel'));\n\nfunction App() {\n return (\n Ana Dashboard<\/h1>\n
G\u00f6rsel ve Varl\u0131k Optimizasyonu: Resimler ve Fontlar Nas\u0131l S\u0131k\u0131\u015ft\u0131r\u0131l\u0131r?<\/h3>\n
\n
\n
image-webpack-loader<\/code> gibi y\u00fckleyiciler ekleyerek derleme s\u0131ras\u0131nda otomatik s\u0131k\u0131\u015ft\u0131rma yapabilirsiniz.<\/li>\n\n
font-display: swap<\/code>:<\/strong> CSS'de font-display: swap<\/code> \u00f6zelli\u011fini kullanarak, web fontu y\u00fcklenirken sistem fontunun g\u00f6sterilmesini sa\u011flay\u0131n. Bu, metnin gizlenmesini (FOIT - Flash of Invisible Text) \u00f6nler ve daha iyi bir kullan\u0131c\u0131 deneyimi sunar.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\/* Font Y\u00fckleme \u00d6rne\u011fi *\/\n@font-face {\n font-family: 'MyCustomFont';\n src: url('\/fonts\/MyCustomFont.woff2') format('woff2'),\n url('\/fonts\/MyCustomFont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n font-display: swap; \/* Font y\u00fcklenene kadar sistem fontu g\u00f6sterilir *\/\n}\n<\/pre>\n\u0130leri D\u00fczey Optimizasyon Taktikleri ve Taray\u0131c\u0131 \u00d6nbellekleme Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n
S\u0131k\u0131\u015ft\u0131rma Algoritmalar\u0131: Gzip ve Brotli<\/h3>\n
\n# Nginx gzip yap\u0131land\u0131rmas\u0131\ngzip on;\ngzip_vary on;\ngzip_proxied any;\ngzip_comp_level 6;\ngzip_types text\/plain text\/css application\/json application\/javascript text\/xml application\/xml application\/xml+rss text\/javascript;\n\n# Brotli i\u00e7in (Nginx'e Brotli mod\u00fcl\u00fcn\u00fcn y\u00fckl\u00fc olmas\u0131 gerekir)\nbrotli on;\nbrotli_comp_level 6;\nbrotli_types text\/plain text\/css application\/json application\/javascript text\/xml application\/xml application\/xml+rss text\/javascript image\/svg+xml;\n<\/pre>\nTaray\u0131c\u0131 \u00d6nbellekleme ve CDN Kullan\u0131m\u0131<\/h3>\n
Cache-Control<\/code> ba\u015fl\u0131klar\u0131n\u0131 kullanarak, taray\u0131c\u0131ya belirli dosyalar\u0131 ne kadar s\u00fcreyle yerel olarak saklamas\u0131 gerekti\u011fini s\u00f6yleyebiliriz.<\/p>\nmain.2a3f5b.js<\/code>) sayesinde, yeni bir URL ile yeni dosyan\u0131n indirilmesi sa\u011flan\u0131r. Bu, \u00f6nbelle\u011fin ge\u00e7ersiz k\u0131l\u0131nmas\u0131 (cache busting) olarak bilinir.<\/p>\n\nCache-Control: public, max-age=31536000, immutable\n<\/pre>\nMod\u00fcler \u0130\u00e7e Aktar\u0131mlar ve Minimal K\u00fct\u00fcphaneler<\/h3>\n
date-fns<\/code> gibi mod\u00fcler ve hafif bir k\u00fct\u00fcphaneyi tercih edebilirsiniz. Benzer \u015fekilde, Ant Design veya Material-UI gibi bile\u015fen k\u00fct\u00fcphaneleri kullan\u0131rken, t\u00fcm k\u00fct\u00fcphaneyi i\u00e7e aktarmak yerine sadece kulland\u0131\u011f\u0131n\u0131z bile\u015fenleri (import { Button, Table } from 'antd';<\/code>) i\u00e7e aktard\u0131\u011f\u0131n\u0131zdan emin olun. Bu, Tree Shaking ile birlikte \u00e7al\u0131\u015farak en iyi sonu\u00e7lar\u0131 verir.<\/p>\nMobil Uyumlu Tasar\u0131m ve Performans<\/h3>\n
@media<\/code> rules), responsive tasar\u0131m\u0131n temelidir. Bu sorgular sayesinde, farkl\u0131 ekran boyutlar\u0131na g\u00f6re farkl\u0131 stiller uygulayabiliriz. Bundle boyutunu do\u011frudan etkilemese de, mobil cihazlar i\u00e7in daha az g\u00f6rsel a\u011f\u0131rl\u0131k, daha az karma\u015f\u0131k JavaScript animasyonlar\u0131 ve daha k\u00fc\u00e7\u00fck varl\u0131klar kullanmak, mobil performans\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6rne\u011fin, bir sidebar'\u0131 mobil g\u00f6r\u00fcn\u00fcmde tamamen gizlemek, kullan\u0131c\u0131lar\u0131n dikkatini daha az da\u011f\u0131t\u0131r ve ana i\u00e7eri\u011fe odaklanmalar\u0131n\u0131 sa\u011flar:<\/p>\n\n@media (max-width: 768px) {\n .dashboard-sidebar {\n display: none; \/* Mobil'de sidebar gizle *\/\n }\n .dashboard-content {\n width: 100%; \/* \u0130\u00e7eri\u011fi tam geni\u015flik yap *\/\n }\n \/* Daha az kaynak t\u00fcketen mobil \u00f6zel bile\u015fenler *\/\n .desktop-only-chart {\n display: none; \n }\n}\n<\/pre>\nSonu\u00e7: Yolculu\u011fumuzdan \u00c7\u0131kar\u0131lan Dersler ve Gelecek Ad\u0131mlar<\/h2>\n
\n
S\u0131k\u00e7a Sorulan Sorular<\/h3>\n
\nCevap: A\u015f\u0131r\u0131ya ka\u00e7an optimizasyonlar, bazen okunabilirli\u011fi veya bak\u0131m kolayl\u0131\u011f\u0131n\u0131 olumsuz etkileyebilir. \u00d6rne\u011fin, her k\u00fc\u00e7\u00fck bile\u015feni ayr\u0131 bir chunk olarak ay\u0131rmak, \u00e7ok say\u0131da HTTP iste\u011fi olu\u015fturarak performans\u0131n d\u00fc\u015fmesine neden olabilir. \u00d6nemli olan, optimum dengeyi bulmakt\u0131r. Genellikle, 200-500 KB aras\u0131 bir bundle boyutu, iyi bir hedef olarak kabul edilir.<\/p>\n
\nCevap: Webpack en pop\u00fcler bundler'lardan biri olsa da, Rollup<\/a> (\u00f6zellikle k\u00fct\u00fcphaneler i\u00e7in) ve Vite<\/a> (daha h\u0131zl\u0131 geli\u015ftirme deneyimi i\u00e7in) gibi ba\u015fka modern bundler'lar da mevcuttur. Bu ara\u00e7lar da benzer optimizasyon yetenekleri sunar.<\/p>\n
\nCevap: Her proje i\u00e7in bu kadar kapsaml\u0131 bir optimizasyon gerekli olmayabilir. K\u00fc\u00e7\u00fck, i\u00e7 kullan\u0131c\u0131 taban\u0131na sahip veya \u00e7ok basit web siteleri i\u00e7in temel s\u0131k\u0131\u015ft\u0131rma ve \u00f6nbellekleme yeterli olabilir. Ancak, geni\u015f kullan\u0131c\u0131 kitlesine ula\u015fan, yo\u011fun trafik alan veya mobil odakl\u0131 projeler i\u00e7in bu detayl\u0131 optimizasyonlar kritik \u00f6neme sahiptir.<\/p>\n
\nCevap: Hay\u0131r, modern arama motorlar\u0131 (\u00f6zellikle Google), JavaScript ile render edilen ve lazy loaded i\u00e7eri\u011fi tarayabilir ve indeksleyebilir. \u00d6nemli olan, i\u00e7eri\u011fin tamamen y\u00fcklendi\u011finde eri\u015filebilir ve etkile\u015fimli olmas\u0131d\u0131r. Googlebot, sayfan\u0131n tam y\u00fcklendi\u011fi ve JavaScript'in \u00e7al\u0131\u015ft\u0131\u011f\u0131 an\u0131 taklit eder.<\/p>\n
\nCevap: Brotli genellikle Gzip'ten daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar ve daha modern bir algoritmad\u0131r. Taray\u0131c\u0131 deste\u011fi geni\u015f oldu\u011fu i\u00e7in, m\u00fcmk\u00fcnse hem Gzip hem de Brotli'yi sunucunuzda etkinle\u015ftirmek ve taray\u0131c\u0131n\u0131n destekledi\u011fi en iyi format\u0131 kullanmas\u0131na izin vermek en iyi yakla\u015f\u0131md\u0131r. E\u011fer Brotli desteklenmiyorsa, Gzip'e fallback yapmak idealdir.<\/p>\n