📋 محتويات الصفحة
📖 الوصف
Webpack Bundle Analyzer هي أداة تحليل بصري لحجم ملفات JavaScript في مشاريع Webpack. تعرض الأداة خريطة تفاعلية توضح حجم كل وحدة (module) وحجمها بعد الضغط (gzipped). تساعد الأداة في تحديد الحزم الكبيرة والتبعيات غير الضرورية التي تؤثر على أداء التطبيق. تدعم أيضاً Rollup و esbuild عبر أدوات مشابهة.
🎯 يستخدم في
مجالات استخدام هذه الأداة
تحليل حجم الحزمة
تحسين الأداء
تحديد التبعيات الكبيرة
Tree Shaking
Code Splitting
✨ المميزات
أبرز مميزات هذه الأداة
Easy Visualization
Easy التفاعلية
Easy gzip sizes
Easy Tree Shaking
Easy تصدير
Easy بحث
Easy تكامل
⚠️ العيوب
نقاط يجب مراعاتها
يعتمد على Webpack
قد يكون بطيئاً
يحتاج تكوين
قد يكون معقداً
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// تثبيت الحزمة
// npm install --save-dev webpack-bundle-analyzer
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
reportFilename: 'bundle-report.html'
})
]
}
// أو استخدم size-limit
// npm install --save-dev size-limit @size-limit/preset-small-lib
// في package.json:
// "size-limit": [{ "path": "dist/index.js", "limit": "10 KB" }]📚 أدوات أخرى في Performance
قد يعجبك أيضاً
Calibre
⭐أداة اختبار ومراقبة الأداء
Chrome User Experience Report (CrUX)
⭐مجموعة بيانات تجربة المستخدم من Google
CrUX (Dashboard)
أداة مراقبة بيانات تجربة المستخدم
Image Optimization
⭐تقنيات تحسين الصور
Lazy Loading
⭐تقنية تحسين الأداء
Lighthouse
⭐أداة فحص شاملة من Google