JavaScript Optimizasyonu: Performans, Bundle Boyutu ve Yükleme

JavaScript Performansı Neden Önemlidir?

JavaScript, tarayıcıda en çok CPU tüketen kaynaktır. Büyük JS dosyaları, parse ve compile süresini artırır ve INP (Interaction to Next Paint) metriğini olumsuz etkiler.

Tipik bir web sitesinde JavaScript, sayfa ağırlığının %40-60'ını oluşturur. Kullanılmayan JavaScript, gereksiz CPU ve bellek tüketimine neden olur.

JavaScript optimizasyonu, Core Web Vitals metriklerini (özellikle INP ve LCP) iyileştirir. Optimize edilmiş JS, daha hızlı ve daha responsive bir kullanıcı deneyimi sağlar.

Bundle Boyutu Optimizasyonu

Tree shaking: Kullanılmayan export'ları kaldırın. ES modules (import/export) kullanın. CommonJS (require) tree shaking'i desteklemez.

Bundle analizi: webpack-bundle-analyzer veya rollup-plugin-visualizer ile bundle içeriğini görselleştirin. Hangi kütüphanelerin en çok yer kapladığını tespit edin.

Alternatif kütüphaneler: moment.js yerine day.js (2KB vs 300KB), lodash yerine lodash-es veya native methods. Büyük kütüphaneleri hafif alternatiflerle değiştirin.

Dependency audit: npm ls veya depcheck ile kullanılmayan bağımlılıkları tespit edin. package.json'dan gereksiz bağımlılıkları kaldırın.

Code Splitting

Route-based splitting: Her sayfa için ayrı bundle oluşturun. React.lazy() ve Suspense ile sayfa bileşenlerini lazy load edin.

Component-based splitting: Ağır bileşenleri (modal, chart, editor) ayrı chunk'lara bölün. Dynamic import() ile ihtiyaç anında yükleyin.

Vendor splitting: node_modules bağımlılıklarını ayrı vendor chunk'a bölün. Vendor chunk değişmez ve tarayıcı önbelleğinde kalır.

Webpack: optimization.splitChunks ile otomatik code splitting. Vite: Rollup'ın otomatik code splitting'i. Next.js: Otomatik route-based splitting.

Lazy Loading

Dynamic import(): const module = await import('./heavy-module.js'); ile modül ihtiyaç anında yüklenir.

Intersection Observer: Görünür olduğunda bileşeni yükle. React.lazy + Intersection Observer ile below-the-fold bileşenleri lazy load edin.

Prefetch ve preload: Kritik olmayan modülleri prefetch ile arka planda yükleyin. <link rel="prefetch" href="chunk.js"> ile tarayıcı boşta olduğunda yükler.

React Suspense: <Suspense fallback={<Loading />}><LazyComponent /></Suspense> ile lazy loaded bileşenler için loading state gösterin.

Performans Teknikleri

Debounce ve throttle: Scroll, resize ve input olaylarında debounce/throttle kullanın. Lodash debounce veya native setTimeout ile uygulayın.

Web Workers: Ağır hesaplamaları ana thread'den ayırın. new Worker('worker.js') ile CPU-intensive işleri arka planda çalıştırın.

requestAnimationFrame: Animasyon ve DOM güncellemelerini requestAnimationFrame ile senkronize edin. 60fps hedefleyin.

Virtual scrolling: Büyük listelerde (1000+ öğe) sadece görünür öğeleri render edin. react-window veya vue-virtual-scroller kullanın.

Memoization: useMemo, useCallback ve React.memo ile gereksiz hesaplamaları ve re-render'ları önleyin.

Ölçümleme ve İzleme

Lighthouse Performance audit: JavaScript execution time, unused JavaScript ve bundle size metriklerini kontrol edin.

Chrome DevTools Performance tab: JavaScript execution, scripting ve rendering sürelerini analiz edin. Long tasks ve main thread blocking'i tespit edin.

Web Vitals: INP, LCP ve CLS metriklerini izleyin. web-vitals kütüphanesi ile gerçek kullanıcı verilerini toplayın.

Real User Monitoring (RUM): Sentry, Datadog veya New Relic ile gerçek kullanıcı performans verilerini izleyin.