}>); } Measure bundle sizes before/after with npm run build and npx source-map-explorer build/static/js/*.js.

In Angular use route-based loading with loadChildren and check bundlesize in production using Angular CLI:

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

Misconfigured lazy load often ends up in a common chunk; detect this by looking at .js filenames in the Network tab.

For Vue use defineAsyncComponent or dynamic import:

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

Use Webpack magic comments to name chunks and use sourcemaps to see which imports are large, then optimize selectively.

Reducing render costs: virtualization, memo and change detection strategies

To cut render cost on long lists use react-window or react-virtualized. Example react-window usage and measurement:

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

Compare Main thread time between full render and virtualized render using Chrome DevTools Performance (measure in ms).

In React, misuse of useMemo and useCallback can hold onto memory; correct example:

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

If profiling shows little benefit from a useMemo result, remove it; unnecessary caching creates memory pressure and increases GC load.

In Angular reduce unnecessary change detection calls by using ChangeDetectionStrategy.OnPush:

@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

When using OnPush, ensure immutable data flows or correctly call detectChanges, otherwise the UI may not update; test these edge-cases with unit tests.

Memory leaks and GC behavior: detection, reproduction and fix

To detect memory leaks take an 'Allocation instrumentation on timeline' recording in Chrome DevTools Memory tab, then compare two heap snapshots. Steps: DevTools -> Memory -> Record Allocation Timeline -> interact -> Stop -> 'Take Heap Snapshot'. Inspect retention paths in the 'Retainers' section to find which closure, listener or detached DOM holds references.

To prevent detached DOM leaks, remove event listeners on component unmount. React cleanup example:

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

Also check third-party scripts (e.g. analytics) for callback references; if needed use a WeakMap to associate element->data:

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

.

For server-side rendering or Node services measure memory trends:

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`)

Observe GC triggers and heap growth with CI load tests (Artillery or k6); if heap grows under the same load, you likely have a leak.

Framework comparison: React, Angular, Vue - performance decision tree and criteria

Define measurable criteria when deciding: initial JS byte size, first meaningful paint (FMP), average JS execution time per interaction, memory consumption. Collect these in CI using Lighthouse, WebPageTest and framework-specific devtools:

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

.

React apps benefit from a large ecosystem and mobile bridges that require React Native training; Angular offers built-in DI and AOT for production build optimizations (ng build --prod). Vue stands out in small-to-medium projects with minimal runtime overhead. Implement the same feature in all three frameworks, compare Lighthouse reports side-by-side and automate bundle analysis with source-map-explorer:

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

.

In a training context have students run these measurement practices hands-on during a JavaScript or React course; for example ask students to implement the same page in Angular, React and Vue and produce a 'frontend framework comparison' report. This teaches the 'measure and modify' loop, not just theory.

Frequently Asked Questions

How can I quickly find which React component uses the most CPU (React course focus)?

Use the React Profiler component:

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

Aggregate Profiler results and find the highest actualDuration values; additionally record Chrome DevTools Performance and cross-validate with 'Self Time' on the Main thread.

Change detection fires too often in my Angular app — how do I measure and fix it (Angular course)?

Open Angular DevTools and observe component update counts; for CI automation run user flows in a headless browser and collect profiler data. To apply a quick fix use ChangeDetectionStrategy.OnPush on the component:

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })

Then build with ng build --prod and measure interactive latency improvements with Lighthouse.

A large third-party package causes a memory leak in my Vue project — how do I trace and limit it (Vue course)?

Take before/after snapshots using Chrome DevTools Memory -> Allocation instrumentation on timeline and inspect 'Containment' and 'Retainers' to see which module holds references. If the package holds DOM references, add cleanup on component destroy or defer loading with dynamic import:

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

This ensures the package loads only when used and is friendlier for GC.

Which metrics should I add to CI when doing a frontend framework comparison?

Minimum set: Total JS bytes (gzip), FCP, TTI, Interaction to Next Paint (INP) or Time to Interactive, Main thread JS execution time (ms), peak heap usage. Collection tools: Lighthouse (npx lighthouse), WebPageTest API, Chrome DevTools CPU/Mem recordings; automate with npx @lhci/cli autorun.