Hafif Kod logosu

Yazılar · 3/7

Kod optimizasyonu ve frontend performansı notları.

  1. React 18'in Concurrent Özellikleri Gerçekte Ne Kazandırır?

    React 18'in useTransition, useDeferredValue ve Suspense özellikleri concurrent rendering ile INP'yi nasıl etkiler; hangi durumda gerçek fark yaratır, ne zaman gereksiz ya da ters etki üretir.

  2. SWC Nedir? Babel'in Yerini Ne Kadar Alabiliyor?

    SWC, Rust ile yazılmış hızlı bir JavaScript/TypeScript derleyicisidir; Babel ise on yılı aşkın ekosistemiyle dönüşüm araçlarının olgun temsilcisidir. Hız farkı büyük projelerde anlamlıdır, ancak geçiş kararı plugin bağımlılığı ve araç zincirinin karmaşıklığına göre şekillenir.

  3. Rollup mu esbuild mi? Hangi Projede Hangisi Daha İyi?

    Rollup ve esbuild farklı sorunları çözmek için tasarlanmış araçlardır. Kütüphane yazarken Rollup'ın ESM/CJS çıktı formatı kontrolü ve tree shaking hassasiyeti öne çıkarken, uygulama build'inde esbuild'in Go tabanlı paralel derleme hızı fark yaratır. İkisini birlikte kullanan Vite ise hangi aracın nerede avantajlı olduğunu pratikte gösterir.

  4. Font Yüklemesini Optimize Ederek LCP Nasıl Düşürülür?

    Font yüklemesi LCP'nin sessiz sürükleyicisidir. Başlık metni tarayıcı tarafından LCP öğesi seçildiğinde, font gecikmesi doğrudan skora yazılır. font-display, preload, subset ve fallback metrik uyumu - bu dört adımın birlikte etkisi toplamlı değil çarpımsal olur.

  5. 10.000 Satırlık CSS Dosyasını Küçültmek: Adım Adım Yaklaşım

    10.000 satırlık CSS dosyasını Coverage analizi, bileşen bazlı bölme ve critical CSS ayırma adımlarıyla sistematik biçimde küçültmek için önce nereye bakılacağı ve hangi risklere dikkat edilmesi gerektiği.

  6. Webpack 4'ten 5'e Geçişte Bundle ve Build Süresi Nasıl Değişir?

    Webpack 4'ten 5'e geçişte persistent cache, asset modules ve Module Federation gibi yapısal değişiklikler build süresini ve bundle boyutunu doğrudan etkiler. Geçişte en sık bozulan yapılandırmalar ve bunların nedenleri somut örneklerle ele alınıyor.

  7. jQuery Projelerini Modernize Ederken Performansı Korumak

    jQuery'yi tek seferde kaldırmak yerine kademeli çıkarma sırası kurmanın yolu: hangi parçaları önce taşırsanız risk ve maliyet birlikte düşer.

  8. CSS Animations ve Transitions: GPU Katmanı Farkı Nedir?

    transform ve opacity neden compositor thread'de çalışır, left ve background-color neden her karede layout veya paint tetikler? GPU katmanı avantajı ve will-change kullanımındaki gerçek değiş tokuş.

  9. Next.js 14'ten 15'e Geçişte Performans Değişiklikleri Neler?

    Next.js 15 ile caching varsayılanları tersine döndü, Turbopack dev ortamında kararlı hale geldi, React 19 otomatik pakete girdi. Bu üç değişiklik farklı müdahale profili istiyor: biri elle ayar gerektiriyor, biri otomatik devreye giriyor, biri hâlâ opt-in.

  10. TypeScript Yapılandırması Production Bundle'ı Nasıl Etkiler?

    tsconfig.json ayarları yalnızca tip kontrolünü değil, üretilen JavaScript'in boyutunu ve tree-shaking uyumluluğunu da belirler. target, module ve importHelpers seçeneklerinin production bundle üzerindeki somut etkisi.

  11. Webpack Bundle Analyzer Çıktısını Nasıl Yorumlarsınız?

    Webpack Bundle Analyzer treemap'ini doğru okumak; stat, parsed ve gzip boyutlarını yorumlamak, yinelenen modülleri tespit etmek ve hangi paketi neden çıkarmak gerektiğine karar vermek için sistematik bir bakış açısı.

  12. React Query ile Gereksiz Network İsteğini Azaltmak

    React Query varsayılan olarak staleTime: 0 ile çalışır; bu, aynı query key'i kullanan farklı bileşenlerin her mount olduğunda ayrı ağ isteği başlatmasına yol açar. staleTime ve gcTime parametrelerini doğru yapılandırmak bu gereksiz trafiği önler ve uygulama büyüdükçe farkı artırır.

  13. React DevTools Profiler ile Gereksiz Render'ı Bulmak

    React DevTools Profiler'ın flame graph, commit timeline ve 'Why did this render?' panelini gerçek bir tanı sürecinde nasıl okuyacağınızı öğrenin; gereksiz render'ı bileşen düzeyinde tespit edin.

  14. Create React App'ten Vite'a Geçişte Performans Ne Kadar Değişir?

    Create React App'ten Vite'a geçişte dev server başlama süresi, HMR hızı ve production build farkları somut olarak nasıl değişiyor; geçiş sürecinde CommonJS uyumsuzluğu, ortam değişkenleri ve yapılandırma katmanları gibi engeller neler.

  15. Vite Production Build'i Optimize Eden Yapılandırmalar

    Vite'ın production build'ini küçülten dört yapılandırma alanı: chunk stratejisi, minifier seçimi, CSS bölme kararı ve asset inlining eşiği. Her ayarın ne zaman kazandırdığı, ne zaman ters etki ürettiği somut örneklerle ele alınıyor.