تصغير JavaScript _

كيف يعمل تصغير JavaScript؟

يعمل Terser في أربع مراحل على شجرة التعليمات المجردة AST لشيفرتك. كل مرحلة مستقلة، فيمكنك تفعيل أي منها أو إيقافها دون كسر الأخريات.

1. التحليل. يُحلِّل Terser JavaScript إلى AST. أي خطأ في الصياغة يظهر هنا مع الرمز والسطر الذي تسبب فيه، فتجد المشكلة الحقيقية قبل تشغيل أي تحويل. يقبل المحلل كل بنية ECMAScript قياسية حتى أحدث اقتراحات المرحلة 4.
2. الضغط. يمشي المُضغِّط على AST ويُطبّق عشرات التحويلات الحافظة للدلالات: طيّ الثوابت، وحذف الفروع الميتة، وتضمين الدوال النقية القصيرة، وطيّ تصريحات var المتتالية، وإعادة كتابة الصيغ المعادلة (if/else إلى عوامل ثلاثية، وتقليص سلاسل المقارنة، وطيّ return الشرطي). كل تحويل قابل للعكس مبدئياً؛ المُضغِّط لا يُغيّر السلوك الملحوظ أبداً.
3. التقليص. يُعيد المُقلِّص تسمية الروابط المحلية إلى أقصر معرّفات فريدة (a، b، c، …) داخل كل نطاق. تُعاد تسمية الأسماء التي لا تستطيع الخروج من حدود الوحدة فقط، لذا تبقى الروابط المُصدَّرة ومفاتيح الخصائص والإشارات العالمية سليمة. النتيجة هي أكبر وفر للبايتات في أي مرحلة.
4. التصيير. يُعيد Terser طباعة AST المُحوَّل إلى سلسلة JavaScript مع طيّ المسافات وتقليص فواصل الجمل إلى الحد الأدنى الذي تقبله القواعد النحوية. تُجرَّد التعليقات إلا إذا حافظ مفتاح الترخيص على كتل /*! … */ التي تشترط معظم تراخيص CDN الاحتفاظ بها.

لماذا نُصغّر JavaScript؟

• تحميل صفحات أسرع. السكريبتات الأصغر تُحلَّل وتُنفَّذ أسرع. على اتصال الجوال بالجيل الرابع، تخفيض البايتات بنسبة 40 بالمئة يقطع ثوانٍ حقيقية من Time to Interactive، وهو المقياس الذي يقيسه Google PageSpeed Insights بأكثر قسوة.
• فواتير خروج CDN أقل. تُفوتر CloudFront وCloudflare وFastly بالغيغابايت الخارج. تخفيض السكريبت بنسبة 40 بالمئة عبر ملايين مشاهدات الصفحات الشهرية يتراكم ليُنتج وفورات حقيقية قبل أي عمل على الصور أو CSS. الحساب صحيح حتى بعد gzip وbrotli — يُزيل التصغير الرموز التي كان المُضغِّط سيُرمّزها خلاف ذلك.
• هذا المُصغِّر لا يُثقل صفحتك. Terser يبلغ ~1 م.ب غير مضغوط. معظم المُصغِّرات أونلاين تشحن المكتبة كاملةً عند تحميل الصفحة مما يُدمّر درجة Lighthouse الخاصة بها ويجعل الصفحة تبدو بطيئة قبل أن يكتب المستخدم أي شيء. هذه الصفحة تُحمِّل Terser بشكل كسول فقط عند النقر على تصغير أو تفعيل الوضع المباشر — فيبقى التصيير الأولي تحت حدود Core Web Vitals التي تعِد الأداة ذاتها بمساعدتك على تحقيقها.
• اجتياز Core Web Vitals. يُعلّم Lighthouse وPageSpeed Insights JavaScript الكبير مساهماً مباشراً في ضعف Total Blocking Time. تصغير مكتبات التابعين وحزم التطبيقات هو أسرع مكسب في تدقيقات Lighthouse "تقليل JavaScript غير المستخدم" و"إزالة الوحدات المكررة" — عادةً تخفيض فردي يستحق عشر أو عشرين نقطة.

التطبيقات الشائعة

يظهر تصغير JavaScript في كل مرحلة تقريباً من مراحل مشروع الويب الحديث.

• خطافات ما قبل الإيداع: صغّر سكريبتات الأداة المساعدة الفردية قبل الإيداع في مستودع كي يكون القطعة المُودَعة جاهزةً للإنتاج وتُظهر الفروق تغييرات المنطق بدلاً من اضطراب المسافات.
• تدقيق مقتطفات التابعين: الصق مقتطف تضمين المورّد وتحقق مما إذا كان مُصغَّراً مسبقاً أو يمكن تقليصه أكثر قبل تقديمه لملايين المستخدمين.
• تنظيف السكريبتات القديمة: اضغط ملحقات jQuery القديمة والسكريبتات المكتوبة يدوياً التي تسبق خط الأنابيب الحالي دون لمس شجرة المصدر.

مثال عملي

خذ دالة صغيرة: function add(firstNumber, secondNumber) { /* تجمع رقمين */ return firstNumber + secondNumber; } console.log(add(1, 2)); — نحو 130 بايت شاملةً التعليق. الصقها أعلاه مع تفعيل Mangle وCompress معاً. يتقلص الناتج إلى نحو function add(n,o){return n+o}console.log(add(1,2)); — نحو 55 بايت، خفض بنسبة 58 بالمئة. اسم الدالة add يبقى لأنه مُستشار في استدعاء console.log؛ أما أسماء المعاملات firstNumber وsecondNumber فتتقلص إلى حروف مفردة لكونها محلية لجسم الدالة. أوقف تشغيل Mangle للحفاظ على أسماء المعاملات قابلة للقراءة مع إزالة المسافات وحذف التعليق.

FAQ

هل يُشغَّل هذا في متصفحي؟

نعم. يُحمَّل Terser بشكل كسول في المرة الأولى التي تنقر فيها على تصغير أو تُفعِّل الوضع المباشر — نحو 200 ك.ب مضغوطة تُخزَّن في ذاكرة تخزين متصفحك، ثم لا يُنزَّل شيء آخر. شيفرتك لا تغادر الصفحة أبداً.

ما هو تقليص الأسماء وهل هو آمن؟

التقليص يُعيد تسمية المتغيرات المحلية إلى حروف مفردة لتوفير البايتات. آمن للسكريبتات المستقلة وحزم IIFE لأن إعادات التسمية لا تغادر النطاق. ليس آمناً للسكريبتات التي تُعرّض globals باسم (مثل window.myLib = …) دون غلاف. أوقف Mangle عند الشك.

لماذا تعطّلت شيفرتي بعد التصغير؟

ثلاثة مشتبه بهم معتادين: eval أو with تُشير إلى متغيرات بالسلسلة النصية؛ قراءات Function.name أو arguments.callee تعتمد على المعرّف الأصلي؛ أو globals مُعرَّضة باسم أُعيدت تسميته. أوقف Mangle أولاً لعزل ما إذا كانت إعادة التسمية أو تحويل Compress هو السبب.

هل يدعم الصياغة الحديثة (ES2020+)؟

نعم. اضبط هدف ECMAScript على ES2020 أو Next ويحفظ Terser تسلسل الاختيار الاختياري وتعيين الصفر المنطقي وawait على مستوى الوحدة وعوامل التعيين المنطقي. اضبطه على ES5 ويُخفِّض Terser الصياغة حيث يمكنه، لكنه ليس مُحوِّلاً كاملاً — استخدم Babel لصياغة لا تستطيع ES5 تمثيلها أصلاً.

تصغير JavaScript من جهة المتصفح بـ Terser يمنحك ناتجاً بجودة الإنتاج دون إضافة أداة بناء. الصق سكريبتاً، اختر هدف ECMAScript، انسخ أو نزّل الناتج. لا رفع، لا حساب، لا خط أنابيب بناء. المُصغِّر نفسه يُحمَّل فقط حين تطلبه — فيُكلّفك فتح هذه الصفحة بضعة كيلوبايتات لا ميغابايت.