पाठ 23 / 25
Performance monitoring और profiling
Webpack build performance को measure और improve करें।
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 का उपयोग करें।
# 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 करें
Profile करके bottlenecks को identify करें। Babel-loader और ts-loader अक्सर slow होते हैं। cache-loader के साथ loader output को cache करें।
त्वरित जाँच
त्वरित जाँच: Build performance को कैसे measure करें?
- --profile flag या speed-measure-webpack-plugin का उपयोग करें।
- Bundle में files की संख्या count करें।
- Build के दौरान console logs check करें।
Answer
--profile flag या speed-measure-webpack-plugin का उपयोग करें। — --profile flag और speed-measure-webpack-plugin प्रत्येक build step के लिए detailed timing information provide करते हैं।