# Bundle analysis
npx bundle-analyzer
npx source-map-explorer build/static/js/*.js

# Lighthouse performance audit
npx lighthouse https://your-app.com --view

# Node.js profiling
node --prof your-app.js
node --prof-process isolate-*.log

# Memory analysis
node --inspect your-app.js  # Then use Chrome DevTools

# React profiling (in browser)
# React DevTools > Profiler tab

# Network analysis
npx webpack-bundle-analyzer

// BAD: O(n²) - searching array in loop
for (const user of users) {
  const posts = allPosts.filter(p => p.userId === user.id); // O(n) per user
}

// GOOD: O(n) - group once with Map
const postsByUser = new Map<number, Post[]>();
for (const post of allPosts) {
  const userPosts = postsByUser.get(post.userId) || [];
  userPosts.push(post);
  postsByUser.set(post.userId, userPosts);
}
// Now O(1) lookup per user

// BAD: Inline function creation in render
<Button onClick={() => handleClick(id)}>Submit</Button>

// GOOD: Stable callback with useCallback
const handleButtonClick = useCallback(() => handleClick(id), [handleClick, id]);
<Button onClick={handleButtonClick}>Submit</Button>

// BAD: Object creation in render
<Child style={{ color: 'red' }} />

// GOOD: Stable object reference
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />

// BAD: Expensive computation on every render
const sortedItems = items.sort((a, b) => a.name.localeCompare(b.name));

// GOOD: Memoize expensive computations
const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// BAD: List without keys or with index
{items.map((item, index) => <Item key={index} />)}

// GOOD: Stable unique keys
{items.map(item => <Item key={item.id} item={item} />)}

# Analyze bundle composition
npx webpack-bundle-analyzer build/static/js/*.js

# Check for duplicate dependencies
npx duplicate-package-checker-analyzer

# Find largest files
du -sh node_modules/* | sort -hr | head -20

// BAD: Import entire library
import _ from 'lodash';
import moment from 'moment';

// GOOD: Import only what you need
import debounce from 'lodash/debounce';
import { format, addDays } from 'date-fns';

// Or use lodash-es with tree shaking
import { debounce, throttle } from 'lodash-es';

-- BAD: Select all columns
SELECT * FROM users WHERE active = true;

-- GOOD: Select only needed columns
SELECT id, name, email FROM users WHERE active = true;

-- BAD: N+1 queries (in application loop)
-- 1 query for users, then N queries for each user's orders

-- GOOD: Single query with JOIN or batch fetch
SELECT u.*, o.id as order_id, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.active = true;

-- Add index for frequently queried columns
CREATE INDEX idx_users_active ON users(active);
CREATE INDEX idx_orders_user_id ON orders(user_id);

// BAD: Multiple sequential requests
const user = await fetchUser(id);
const posts = await fetchPosts(user.id);
const comments = await fetchComments(posts[0].id);

// GOOD: Parallel requests when independent
const [user, posts] = await Promise.all([
  fetchUser(id),
  fetchPosts(id)
]);

// GOOD: Batch requests when possible
const results = await batchFetch(['user1', 'user2', 'user3']);

// Implement request caching
const fetchWithCache = async (url: string, ttl = 300000) => {
  const cached = cache.get(url);
  if (cached) return cached;

  const data = await fetch(url).then(r => r.json());
  cache.set(url, data, ttl);
  return data;
};

// Debounce rapid API calls
const debouncedSearch = debounce(async (query: string) => {
  const results = await searchAPI(query);
  setResults(results);
}, 300);

// BAD: Event listener without cleanup
useEffect(() => {
  window.addEventListener('resize', handleResize);
  // Missing cleanup!
}, []);

// GOOD: Clean up event listeners
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// BAD: Timer without cleanup
useEffect(() => {
  setInterval(() => pollData(), 1000);
  // Missing cleanup!
}, []);

// GOOD: Clean up timers
useEffect(() => {
  const interval = setInterval(() => pollData(), 1000);
  return () => clearInterval(interval);
}, []);

// BAD: Holding references in closures
const Component = () => {
  const largeData = useLargeData();
  useEffect(() => {
    eventEmitter.on('update', () => {
      console.log(largeData); // Closure keeps reference
    });
  }, [largeData]);
};

// GOOD: Use refs or proper dependencies
const largeDataRef = useRef(largeData);
useEffect(() => {
  largeDataRef.current = largeData;
}, [largeData]);

useEffect(() => {
  const handleUpdate = () => {
    console.log(largeDataRef.current);
  };
  eventEmitter.on('update', handleUpdate);
  return () => eventEmitter.off('update', handleUpdate);
}, []);

# Chrome DevTools Memory tab:
# 1. Take heap snapshot
# 2. Perform action
# 3. Take another snapshot
# 4. Compare to find objects that shouldn't exist
# 5. Look for detached DOM nodes, event listeners, closures

# Node.js memory debugging
node --inspect app.js
# Open chrome://inspect
# Take heap snapshots and compare

# Run full lighthouse audit
npx lighthouse https://your-app.com --view --preset=desktop

# CI mode for automated checks
npx lighthouse https://your-app.com --output=json --output-path=./lighthouse.json

# Check specific metrics
npx lighthouse https://your-app.com --only-categories=performance

// package.json
{
  "bundlesize": [
    {
      "path": "./build/static/js/*.js",
      "maxSize": "200 kB"
    }
  ]
}

// Track Core Web Vitals
import { getCLS, getFID, getLCP, getFCP, getTTFB } from 'web-vitals';

getCLS(console.log);  // Cumulative Layout Shift
getFID(console.log);  // First Input Delay
getLCP(console.log);  // Largest Contentful Paint
getFCP(console.log);  // First Contentful Paint
getTTFB(console.log); // Time to First Byte

# Performance Audit Report

## Executive Summary
- **Overall Score**: X/100
- **Critical Issues**: X
- **Recommendations**: X

## Bundle Analysis
| Metric | Current | Target | Status |
|--------|---------|--------|--------|
| Total Size (gzip) | XXX KB | < 200 KB | WARNING: |
| Main Bundle | XXX KB | < 100 KB | PASS: |
| Vendor Bundle | XXX KB | < 150 KB | WARNING: |

## Web Vitals
| Metric | Current | Target | Status |
|--------|---------|--------|--------|
| LCP | X.Xs | < 2.5s | PASS: |
| FID | XXms | < 100ms | PASS: |
| CLS | X.XX | < 0.1 | WARNING: |

## Critical Issues

### 1. [Issue Title]
**File**: path/to/file.ts:42
**Impact**: High - Causes XXXms delay
**Fix**: [Description of fix]

```typescript
// Before (slow)
const slowCode = ...;

// After (optimized)
const fastCode = ...;
```

### 2. [Issue Title]
...

## Recommendations
1. [Priority recommendation]
2. [Priority recommendation]
3. [Priority recommendation]

## Estimated Impact
- Bundle size reduction: XX KB (XX%)
- LCP improvement: XXms
- Time to Interactive improvement: XXms