# Performance monitoring and profiling — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-23

> Measure and improve Webpack build performance.

## Build performance metrics

Track build time, bundle size, and load performance. Use --profile flag to generate timing data. speed-measure-webpack-plugin measures each loader and plugin. Chrome DevTools measures runtime performance. Fast builds improve developer experience. Small bundles reduce user load time.

## Measure build speed

Use tools to profile your build process.

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

## Optimize slow loaders

Profile to identify bottlenecks. Often babel-loader and ts-loader are slow. Cache loader output with cache-loader. Use parallel-webpack or thread-loader for parallel processing. Exclude node_modules from transpilation when possible.

Quick check

**Quiz:** How do you measure build performance?

- [x] Use --profile flag or speed-measure-webpack-plugin.
- [ ] Count the number of files in bundle.
- [ ] Check console logs during build.

*Answer:* Use --profile flag or speed-measure-webpack-plugin.. The --profile flag and speed-measure-webpack-plugin provide detailed timing information for each build step.