# Performance monitoring और profiling — Webpack: Module Bundling और Build Optimization

Source: https://www.skillbyai.com/hi/webpack/webpack-23

> --profile और speed-measure-webpack-plugin से Webpack build performance profile करें, फिर caching से धीमे loaders ठीक करें।

## Build performance metrics

Build time, bundle size, load performance को track करें। --profile flag का उपयोग करके timing data generate करें। Speed-measure-webpack-plugin प्रत्येक loader और plugin को measure करता है।

## Build speed को measure करें

अपने build process को profile करने के लिए tools का उपयोग करें।

```bash
# Generate timing profile
webpack --profile --json > stats.json

# Analyze with webpack-bundle-analyzer
npx webpack-bundle-analyzer stats.json

# Use speed-measure-webpack-plugin in config
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap(config);
```

Output:

```
Profile data shows timing for each build step
```

## Slow loaders को optimize करें

Bottlenecks पहचानने के लिए profile करें। अक्सर babel-loader और ts-loader slow होते हैं। `cache: { type: 'filesystem' }` से persistent caching enable करें (cache-loader deprecated है)। Parallel processing के लिए thread-loader का उपयोग करें, और जहाँ संभव हो node_modules को transpilation से बाहर रखें।

त्वरित जाँच

**Quiz:** Build performance को कैसे measure करें?

- [ ] Bundle में files की संख्या count करें।
- [ ] Build के दौरान console logs check करें।
- [ ] साथियों से पूछना कि build कितना लंबा लगता है।
- [x] --profile flag या speed-measure-webpack-plugin का उपयोग करें।

*Answer:* --profile flag या speed-measure-webpack-plugin का उपयोग करें।. --profile flag और speed-measure-webpack-plugin प्रत्येक build step के लिए detailed timing information provide करते हैं।