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. Cache loader output with cache-loader. Use parallel-webpack or thread-loader for parallel processing. Exclude node_modules from transpilation when possible.

Quick check

Quick check: How do you measure build performance?

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