هل قد يُفسد الضغط شفرتي؟

Terser محافظ افتراضياً ويصون الدلالة. mangle يُعيد تسمية المتغيّرات غير المُصدَّرة فقط، وcompress يتجنّب أيّ تحويل لا يمكنه إثبات أمانه. إن كانت شفرتك تعتمد على Function.name أو على eval للمصدر، فعطّل mangle لذلك الملفّ.

كم نسبة التقليص المتوقّعة عادةً؟

تتقلّص شفرة JavaScript عادةً بين 40٪ و70٪. الكود ذو التعليقات الطويلة أو الأسماء المسهبة أو الفروع غير المستخدمة يقلّ أكثر. الكود الموجز أصلاً أو الذي معظمه سلاسل حرفية يقلّ أقل. بعد gzip تضيق الفجوة.

ما الفرق بين minify وcompress وmangle؟

minify مصطلح جامع. compress يطبّق تحويلات على مستوى الكود مثل طيّ الثوابت وحذف الفروع الميّتة. mangle يعيد تسمية المعرّفات بأسماء قصيرة. يمكن تشغيل أيّ منها وحده، لكن دمج الثلاثة يعطي عادةً أصغر مخرَج.

هل أُضغَط الكود إذا كان الخادم يستخدم gzip أو brotli أصلاً؟

نعم. gzip يُقلِّل التكرار في النصّ لكنه لا يُعيد تسمية المتغيّرات الطويلة ولا يحذف فروعاً ميّتة. الكود المضغوط ينضغط أفضل ويُحلَّل أسرع عند التحميل. الخطوتان تتراكمان لا تتداخلان.

هل يعمل مع TypeScript أو صياغة ES2022 الحديثة؟

TypeScript خالصاً يحتاج إلى تجميع أوّلاً لأنّ Terser لا يقرأ سوى JavaScript. أمّا صياغة ES حتى ES2022 (الحقول الخاصّة، await في المستوى الأعلى، السلسلة الاختيارية) فتُقرأ مباشرةً دون تحويل Babel.

ضاغط JavaScript

ضغط كود JavaScript لتقليل حجم الملف

الحجم الأصلي

// Utility library — helper functions
(function () {
  "use strict";

/**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

// Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

// Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

console.log("Utilities loaded");

window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

// Utility library — helper functions
(function () {
  "use strict";

  /**
   * Debounce a function call.
   * @param {Function} fn - The function to debounce
   * @param {number} delay - Delay in milliseconds
   */
  function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }

  // Format a number with commas
  function formatNumber(num) {
    return num.toString().replace(
      /\B(?=(\d{3})+(?!\d))/g,
      ","
    );
  }

  // Deep clone an object
  function deepClone(obj) {
    if (obj === null || typeof obj !== "object") {
      return obj;
    }
    const copy = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        copy[key] = deepClone(obj[key]);
      }
    }
    return copy;
  }

  console.log("Utilities loaded");

  window.Utils = {
    debounce: debounce,
    formatNumber: formatNumber,
    deepClone: deepClone,
  };
})();

الإعدادات

مثالالإصدار المستهدف

تشويش المتغيراتضغطإزالة console.logالإبقاء على أسماء الفئاتالإبقاء على أسماء الدوال

Ctrl+Enter للتصغير

ما هو ضاغط JavaScript؟

يقوم مُصغِّر JS بضغط كود JavaScript عن طريق حذف المسافات البيضاء والتعليقات واختصار أسماء المتغيرات باستخدام محرك Terser. يُقلِّل ذلك من حجم الملف لتحميل صفحات أسرع وتكاليف نطاق ترددي أقل، مع الحفاظ الكامل على وظائف الكود.

يُشغِّل المضغوط Terser محلياً على شفرتك: يحذف المسافات والتعليقات، ويعيد تسمية المتغيّرات المحلّية إلى حروف مفردة عند تفعيل mangle، ويُطبِّق تحويلات AST آمنة عند تفعيل compress، ويستطيع حذف استدعاءات console.log. وتعرض الأداة الحجم الأصلي، الحجم بعد الضغط، ونسبة التوفير لتؤكّد الفائدة قبل النشر.

كيفية الاستخدام

الصق كود JavaScript في محرر الإدخال، أو قم بتحميل ملف .js.
اختر خيارات التصغير: فعِّل تشويش الأسماء (اختصار أسماء المتغيرات)، والضغط، وإزالة عبارات console.log.
انقر على «تصغير» لمعالجة الكود. تحقق من نسبة تقليل الحجم، ثم نزِّل الملف المُصغَّر أو انسخه إلى الحافظة.

متى تستخدم

ضغط حزمة JavaScript قبل رفعها إلى شبكة CDN لا تتوفّر فيها خطوة بناء.
تنظيف التعليقات وعبارات console من مكتبة قبل لصقها في قالب CMS.
إصدار نسخة مضغوطة لمرّة واحدة لأداة دردشة، أو بكسل إعلاني، أو وسم سكربت طرف ثالث.

النتيجة

لديك مكتبة أدوات بحجم 45 كيلوبايت تحتوي على تعليقات مطوَّلة وأسماء متغيرات طويلة. الصقها وفعِّل التشويش والضغط، واحصل على مخرج بحجم 12 كيلوبايت — تقليل بنسبة 73% جاهز للنشر في الإنتاج.

الأسئلة الشائعة

هل قد يُفسد الضغط شفرتي؟: Terser محافظ افتراضياً ويصون الدلالة. mangle يُعيد تسمية المتغيّرات غير المُصدَّرة فقط، وcompress يتجنّب أيّ تحويل لا يمكنه إثبات أمانه. إن كانت شفرتك تعتمد على Function.name أو على eval للمصدر، فعطّل mangle لذلك الملفّ.
كم نسبة التقليص المتوقّعة عادةً؟: تتقلّص شفرة JavaScript عادةً بين 40٪ و70٪. الكود ذو التعليقات الطويلة أو الأسماء المسهبة أو الفروع غير المستخدمة يقلّ أكثر. الكود الموجز أصلاً أو الذي معظمه سلاسل حرفية يقلّ أقل. بعد gzip تضيق الفجوة.
ما الفرق بين minify وcompress وmangle؟: minify مصطلح جامع. compress يطبّق تحويلات على مستوى الكود مثل طيّ الثوابت وحذف الفروع الميّتة. mangle يعيد تسمية المعرّفات بأسماء قصيرة. يمكن تشغيل أيّ منها وحده، لكن دمج الثلاثة يعطي عادةً أصغر مخرَج.
هل أُضغَط الكود إذا كان الخادم يستخدم gzip أو brotli أصلاً؟: نعم. gzip يُقلِّل التكرار في النصّ لكنه لا يُعيد تسمية المتغيّرات الطويلة ولا يحذف فروعاً ميّتة. الكود المضغوط ينضغط أفضل ويُحلَّل أسرع عند التحميل. الخطوتان تتراكمان لا تتداخلان.
هل يعمل مع TypeScript أو صياغة ES2022 الحديثة؟: TypeScript خالصاً يحتاج إلى تجميع أوّلاً لأنّ Terser لا يقرأ سوى JavaScript. أمّا صياغة ES حتى ES2022 (الحقول الخاصّة، await في المستوى الأعلى، السلسلة الاختيارية) فتُقرأ مباشرةً دون تحويل Babel.

ضاغط JavaScript

الحجم الأصلي

الإعدادات

ما هو ضاغط JavaScript؟

كيفية الاستخدام

متى تستخدم

النتيجة

الأسئلة الشائعة

أدوات ذات صلة

مولّد البيانات المهيكلة

تحويل صفحة ويب إلى PDF

مولّد سياسة الخصوصية

مُنشئ شروط الخدمة

مولّد موافقة ملفات تعريف الارتباط

ضاغط CSS

ضاغط JavaScript

الحجم الأصلي

الإعدادات