غالبًا ما يُخلَط بين تصغير JavaScript والتعتيم، رغم أنهما مهمتان مختلفتان بهدفين مختلفين: إحداهما توفّر البايتات، والأخرى تجعل منطق الكود أصعب فهمًا.
ماذا يفعل التصغير
يحذف أداة التصغير المسافات والتعليقات والأسطر الفارغة، ويختصر أسماء المتغيرات المحلية إلى حرف أو حرفين حيثما كان ذلك آمنًا. يبقى منطق البرنامج بلا تغيير تمامًا — إنه ضغط تقني بحت للملف.
من JSMin إلى Terser: تاريخ قصير
أصدر دوغلاس كروكفورد أداة JSMin في أوائل الألفين، وكانت من أوائل أدوات تصغير JavaScript المستخدمة على نطاق واسع — كانت تحذف المسافات والتعليقات فقط دون المساس بأسماء المتغيرات. أدوات حديثة مثل Terser (وهي فرع من UglifyJS) وesbuild تذهب أبعد من ذلك: تحلّل الكود إلى شجرة بنية مجردة (AST) وتعيد تسمية المتغيرات المحلية ومعاملات الدوال بحرف واحد حيثما أمكن، وهذا ما يوفّر معظم حجم الملف في أي مشروع حقيقي، أكثر بكثير من مجرد حذف المسافات.
خرائط المصدر: كيف تُصحَّح الأخطاء في كود أُعيدت تسمية متغيراته
عندما تختصر أسماء المتغيرات إلى a وb وc وتختفي كل الأسطر الفارغة، يشير تتبع الخطأ في الإنتاج إلى موضع غير قابل للقراءة داخل سطر واحد طويل جدًا. خريطة المصدر (source map) تحلّ هذه المشكلة: هي ملف منفصل يربط كل موضع في الكود المصغّر بسطره وعموده واسم متغيره الأصليين، بحيث تعرض أدوات المطورين تتبعًا مقروءًا للخطأ رغم أن المتصفح ينفّذ فعليًا الملف المصغّر.
لماذا نحتاج هذا
- تقليل حجم حزمة JS قبل النشر في الإنتاج.
- تسريع تنزيل وتحليل السكربت في المتصفح.
- فهم لماذا يمكن قراءة الكود المصغّر إذا أراد أحد ذلك، بينما يصعب تفسير الكود المعتّم كثيرًا.
Tree shaking مقابل التصغير
Tree shaking تقنية منفصلة لا ينبغي الخلط بينها وبين التصغير: تحلّل رسم بياني لاعتماديات الوحدات وتحذف تمامًا من الحزمة النهائية الدوال والصادرات غير المستخدمة في أي مكان، أثناء مرحلة البناء نفسها. أما التصغير فيعمل على كود جاهز بالفعل ويقتصر على اختصار تمثيله النصي. تطبّق أدوات البناء الحديثة مثل Vite أو webpack عادة كلتا التقنيتين بالتتابع.