}>); } Bu değişiklikten önce/sonra bundle boyutlarını npm run build ve npx source-map-explorer build/static/js/*.js ile ölçün.

Angular'da route tabanlı yükleme için loadChildren kullanın ve üretimde bundlesize'ı kontrol etmek için Angular CLI ile ölçün:

const routes: Routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];
// ölçüm
ng build --prod && npx source-map-explorer dist/*/main.*.js

Yanlış yapılandırılmış lazy load genellikle CommonChunk içine taşır; bunun tespiti için network tabında .js dosya isimlerine bakın.

Vue projeleri için defineAsyncComponent veya dynamic import kullanın:

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./BigComp.vue'))
app.component('AsyncComp', AsyncComp)

Webpack magic comment ile chunk isimlendirme ve sourcemap ile hangi import'un büyük olduğunu görüp hedefli optimizasyon yapın.

Render maliyetlerini azaltma: virtualization, memo ve change detection stratejileri

Uzun listelerde render maliyetini düşürmek için react-window veya react-virtualized kullanın. Örnek react-window kullanımı ve ölçüm:

import { FixedSizeList as List } from 'react-window'
function Row({index, style}) { return 
Row {index}
 }

Chrome DevTools Performance ile önce tam render, sonra virtualized render arasındaki Main thread zamanını karşılaştırın (ms olarak ölçün).

React'ta useMemo ve useCallback yanlış kullanımı bellek tutabilir; doğru örnek:

const items = useMemo(() => computeHeavyList(input), [input]);
const onClick = useCallback((id) => setSelected(id), [setSelected]);

Profiling gösteriyorsa useMemo sonucu çok az fayda sağlıyorsa kaldırın; neden: gereksiz cache belleği oluşturup GC baskısı yaratır.

Angular projelerinde ChangeDetectionStrategy.OnPush kullanarak gereksiz change detection çağrılarını azaltın:

@Component({ selector: 'my', changeDetection: ChangeDetectionStrategy.OnPush })
export class MyComponent { @Input() data: Data }
// ölçüm için Angular DevTools ile component update sayısını sayın

OnPush kullanırken immutable veri akışı veya detectChanges çağrılarını doğru yönetmezseniz UI güncellenmez; bu edge-case'i test edin unit test ile.

Bellek sızıntıları ve GC davranışı: tespit, reprodüksiyon ve düzeltme

Bellek sızıntılarını tespit etmek için Chrome DevTools Memory sekmesinde 'Allocation instrumentation on timeline' kaydı alın, ardından iki heap snapshot karşılaştırın. Adım: DevTools -> Memory -> Record Allocation Timeline -> etkileşim -> Stop -> 'Take Heap Snapshot'. Aradaki retention paths için 'Retainers' bölümünü inceleyin ve hangi closure, listener veya detached DOM'un referans tuttuğunu bulun.

DOM detached sızıntılarını önlemek için event listener'ları component unmount'ta temizleyin. Örnek React temizleme:

useEffect(()=>{
  const onScroll = () => {}
  window.addEventListener('scroll', onScroll)
  return ()=> window.removeEventListener('scroll', onScroll)
}, [])

Ayrıca third-party script'ler (ör. analytics) callback referanslarını kontrol edin; gerekiyorsa WeakMap ile element->data ilişkilendirmesi kullanın:

const meta = new WeakMap(); meta.set(domNode, {id})

.

Sunucu tarafı rendering veya Node servisleri için bellek trendlerini ölçün:

node --expose-gc server.js
// veya runtime ölçümü
const { performance, PerformanceObserver } = require('perf_hooks');
const used = process.memoryUsage().heapUsed / 1024 / 1024;
console.log(`Memory: ${Math.round(used)} MB`)

GC tetiklemeleri ve heap artışlarını CI yük testleriyle (Artillery veya k6) gözlemleyin; aynı yük altında heap büyümesi varsa leak vardır.

Framework karşılaştırması: React, Angular, Vue - performans karar ağacı ve kriterler

Karar verirken ölçülebilir kriterler belirleyin: initial JS byte size, first meaningful paint (FMP), ortalama JS execution time per interaction, bellek tüketimi. Bunları toplamak için CI script'inde Lighthouse, WebPageTest ve framework-specific devtools kullanın:

npx @lhci/cli autorun --collect.url='http://localhost:3000' && curl 'https://www.webpagetest.org/runtest.php?f=json&url=http://localhost:3000'

.

React uygulamaları büyük ekosistem ve react native eğitimi gerektiren mobil köprüleriyle avantaj sağlar; Angular büyük uygulamalarda built-in DI ve AOT ile üretim build optimizasyonu sunar (ng build --prod). Vue ise küçük-to-orta projelerde minimal runtime overhead ile öne çıkar. Karşılaştırma için aynı fonksiyonu üç frameworkte implement edip lighthouse raporlarını yan yana karşılaştırın ve bundle analizini source-map-explorer ile otomatikleştirin:

npx source-map-explorer build/static/js/*.js

.

Eğitim bağlamı: bir javascript eğitimi veya reactjs eğitimi sırasında bu ölçüm-pratiklerini hands-on yaptırın; örneğin öğrencilere angular eğitimi veya vuejs eğitimi verilirken aynı sayfayı her frameworkte çalıştırıp 'frontend framework karşılaştırması' raporu çıkarmalarını isteyin. Bu pratik, yalnızca teori değil, 'ölç ve değiştir' döngüsünü öğretir.

Sık Sorulan Sorular

Nasıl hızlıca React uygulamamın hangi bileşeninin en çok CPU harcadığını bulurum (reactjs eğitimi odaklı)?

React Profiler komponentini kullanın:

import { Profiler } from 'react'
console.log(id,phase,duration)}>

Profiler sonuçlarını toplayıp en yüksek actualDuration değerlerini tespit edin; ek olarak Chrome DevTools Performance kaydı alıp Main thread'teki 'Self Time' ile çapraz doğrulama yapın.

Angular uygulamamda change detection çok sık tetikleniyor, nasıl ölçer ve çözerim (angular eğitimi)?

Angular DevTools'u açın ve component update sayısını izleyin; CI'de otomatik test için headless tarayıcı ile kullanıcı akışını çalıştırıp Profiler verisi toplayın. Hemen uygulamak için bileşende ChangeDetectionStrategy.OnPush kullanın:

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })

Sonra ng build --prod ile bundle'ı oluşturup Lighthouse ile interaktif latency düşüşünü ölçün.

Vue projemde büyük bir third-party paket bellek sızıntısına neden oluyor, nasıl izleyip sınırlayayım (vuejs eğitimi)?

Chrome DevTools Memory -> Allocation instrumentation on timeline ile sızıntı yapmadan önce ve sonra snapshot alın, 'Containment' ve 'Retainers' sekmelerinden hangi modülün referans tuttuğunu bulun. Eğer paket DOM referansı tutuyorsa komponent destroy sırasında ilgili temizlemeyi ekleyin veya dynamic import ile paket yüklemeyi erteleyin:

const Lib = defineAsyncComponent(()=>import('heavy-lib'))

Böylece paket yalnızca kullanıldığında yüklenir ve GC'ye daha uygun olur.

frontend framework karşılaştırması yaparken hangi metrikleri CI'ye eklemeliyim?

Minimum set: Total JS bytes (gzip), FCP, TTI, Interaction to Next Paint (INP) veya Time to Interactive, Main thread JS execution time (ms), peak heap usage. Toplama araçları: Lighthouse (npx lighthouse), WebPageTest API, Chrome DevTools CPU/Mem kayıtları; otomatikleştirmek için npx @lhci/cli autorun komutunu kullanın.