أداة تصغير JavaScript وCSS

ماذا تفعل الأداة

يحذف التصغير كل ما لا يحتاجه المتصفح لتشغيل الكود: المسافات البيضاء وفواصل الأسطر والتعليقات والأسماء الطويلة. والملفات الأصغر تُنزَّل أسرع، ما يحسّن زمن تحميل الصفحة ومؤشرات Core Web Vitals، خاصة على شبكات الهاتف المحمول.

تصغّر هذه الأداة JavaScript باستخدام Terser، المصغّر الذي تستخدمه webpack وRollup وVite، وCSS باستخدام CSSO، الذي يعيد أيضًا هيكلة ملفات الأنماط: فهو يختصر الألوان (#ffffff إلى #fff)، ويحذف الوحدات والقيم الزائدة (0px 0px إلى 0)، ويدمج القواعد التي تتشارك المحددات أو التصريحات.

طريقة الاستخدام

1. الصق الكود في مربع الإدخال، أو أفلت عليه ملف .js أو .css، أو انقر مثال.
2. اختر JavaScript أو CSS.
3. في JavaScript، يعيد تقصير أسماء المتغيّرات تسمية المتغيّرات المحلية والمعاملات بأحرف مفردة. ولا تتغيّر الأسماء المصدَّرة والعامة أبدًا.
4. في CSS، يجمع دمج القواعد المكرّرة القواعد ذات التصريحات المتطابقة.
5. انسخ النتيجة أو نزّلها. تُظهر عدّادات الحجم أسفل كل مربع مقدار ما وفّرته.

إذا كان في JavaScript خطأ نحوي، تعرض رسالة الخطأ السطر والعمود لتنتقل إليه.

مثال

// Sum the price of every item
export function cartTotal(items, discountPercent = 0) {
  const subtotal = items.reduce(function (sum, item) {
    return sum + item.price * item.quantity
  }, 0)
  return subtotal * (1 - discountPercent / 100)
}

يصبح

export function cartTotal(t,r=0){return t.reduce(function(t,r){return t+r.price*r.quantity},0)*(1-r/100)}

متى تستخدمها

استخدمها لمهمة سريعة لمرة واحدة: مقتطف لـ CDN، أو سكربت مضمّن في بريد HTML، أو bookmarklet، أو لمعرفة إلى أي حد يمكن تصغير مكتبة ما. أما في مشروع حقيقي، فيجب أن تتولى أداة التجميع (bundler) التصغير في كل عملية بناء ليبقى الكود المصدري مقروءًا.