Performance monitoring and profiling

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.

# 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. Enable persistent caching with cache: { type: 'filesystem' } (cache-loader is deprecated). Use thread-loader for parallel processing, and exclude node_modules from transpilation when possible.

Quick check

Quick check: How do you measure build performance?

• Count the number of files in bundle.
• Check console logs during build.
• Ask teammates how long it feels.
• Use --profile flag or speed-measure-webpack-plugin.