📋 محتويات الصفحة
📖 الوصف
Import Cost هي إضافة لـ VS Code تعرض حجم كل حزمة مستوردة في الكود. تساعد المطورين على اتخاذ قرارات مستنيرة حول dependencies وتحديد الحزم الكبيرة.
🎯 يستخدم في
مجالات استخدام هذه الأداة
مراقبة حجم الحزم (Bundle Size)
اكتشاف الحزم الثقيلة
اتخاذ قرارات مدروسة حول libraries
تحسين أداء التطبيق
مراجعة Pull Requests
تحسين Tree Shaking
✨ المميزات
أبرز مميزات هذه الأداة
عرض حجم الحزمة بجانب import statement
عرض حجم Gzipped
تمييز الحزم الكبيرة (أحمر)
تمييز الحزم المتوسطة (أصفر)
تحديث تلقائي عند الحفظ
دعم JavaScript و TypeScript
دعم ESM و CommonJS
يعمل في الخلفية بدون تأثير على الأداء
⚠️ العيوب
نقاط يجب مراعاتها
قراءة فقط (لا يحل المشاكل)
قد لا يكون دقيقاً 100%
يحتاج وقت في المشاريع الكبيرة
لا يدعم جميع الـ bundlers configurations
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// .vscode/settings.json
{
"importCost.bundleSizeDecoration": "both",
"importCost.maxBundleSize": 500000,
"importCost.maxGzipSize": 100000,
"importCost.bundleSizeConcurrency": 5
}📚 أدوات أخرى في Extensions
قد يعجبك أيضاً
Auto Import
إضافة VS Code لإضافة الاستيرادات تلقائياً (Auto Import Extension)
Bracket Pair Colorizer
⭐إضافة VS Code لتلوين الأقواس
Color Picker
إضافة VS Code لاختيار الألوان
CSS Modules
⭐إضافة VS Code لدعم CSS Modules
Error Lens
⭐إضافة VS Code لعرض الأخطاء في السطر (Inline Diagnostics)
ESLint
⭐إضافة VS Code للتحقق من جودة الكود