تخطي إلى المحتوى
🛠️
Whiz Tools

مصغر JavaScript - أداة تحسين كود JS مجانية عبر الإنترنت

أداة مجانية لتصغير JavaScript تقلل حجم الكود عن طريق إزالة المسافات البيضاء والتعليقات. قم بتحسين ملفات JS فورًا دون الحاجة إلى تثبيت أي برنامج.

مصغر JavaScript

حول هذه الأداة

هذا المصغر البسيط لـ JavaScript يزيل المسافات والتعليقات غير الضرورية لتقليل حجم الكود. يحافظ على الوظائف مع جعل الكود أكثر تراصًا.

  • يزيل المسافات غير الضرورية (المسافات، علامات التبويب، السطور الجديدة)
  • يزيل التعليقات (أحادية السطر ومتعددة السطور)
  • يحافظ على سلاسل النصوص والتعبيرات العادية
  • يحافظ على وظائف الكود
حاسبة التحميل...
📚

التوثيق

ما هي أداة تصغير JavaScript؟

أداة تصغير JavaScript هي أداة تقلّص الشيفرة المصدرية لـ JavaScript بإزالة المحارف التي لا يحتاج إليها المتصفح لتشغيلها، مثل المسافات الزائدة وفواصل الأسطر والتعليقات. تظل الشيفرة تؤدي الشيء نفسه تمامًا بعد تصغيرها؛ إذ يتغير حجم الملف فقط.

تُنزَّل ملفات JavaScript الأصغر حجمًا وتُحمَّل بسرعة أكبر، لذلك يُعدّ التصغير خطوة شائعة قبل إطلاق موقع الويب.

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

تقرأ هذه الأداة الشيفرة محرفًا واحدًا في كل مرة وتعيد بناءها، مع إسقاط كل ما يحتاج إليه القراء ولا يحتاج إليه محرّك JavaScript. وهي تزيل:

  • التعليقات، بما في ذلك تعليقات // single-line وتعليقات /* multi-line */، وكذلك التعليقات بأسلوب JSDoc.
  • المسافات وعلامات الجدولة وفواصل الأسطر الفارغة الزائدة التي وُجدت فقط لتسهيل قراءة الشيفرة.

لا تضيف الأداة أي شيء آخر ولا تزيله. فهي لا تحذف فاصلة منقوطة أو قوسًا أو أي محرف آخر موجودًا أصلًا في الشيفرة، ولا تُدرج علامات ترقيم جديدة. كما أنها تترك عدة أشياء دون تغيير:

  • النص الموجود داخل السلاسل النصية ("like this"، 'like this') والقيم الحرفية للقوالب (`like this`)، حتى إذا احتوى ذلك النص على مسافات أو بدا كأنه تعليق.
  • القيم الحرفية للتعبيرات النمطية، مثل /[a-z]+/g، مع جميع أعلامها: d وg وi وm وs وu وv وy.
  • كل فاصلة منقوطة وفاصلة وقوس موجودة أصلًا في الشيفرة.

أحيانًا لا يمكن إزالة مسافة بين رمزين دون تغيير معناهما. فلا يمكن أن تصبح return a هي returna، لأن ذلك سيُقرأ كلمة واحدة. وينطبق الأمر نفسه على الأسماء المكتوبة بأحرف خارج الأبجدية الإنجليزية، لذلك تحتفظ typeof π بمسافتها. وعندما تؤدي إزالة المسافة إلى دمج رمزين، تحتفظ الأداة بمسافة واحدة بدلًا من ذلك.

قد يكون لفاصل السطر أهمية أيضًا. إذ تُدرج JavaScript أحيانًا فاصلة منقوطة تلقائيًا في نهاية السطر، وهي قاعدة تُسمى الإدراج التلقائي للفاصلة المنقوطة. فإذا كان حذف فاصل السطر قد يفعّل هذه القاعدة أو يمنعها، أو إذا جاء فاصل السطر بعد قوس إغلاق }، تحتفظ الأداة بسطر جديد واحد هناك. ولهذا لا تُضغط الشيفرة المصغّرة دائمًا في سطر واحد؛ فبعض فواصل الأسطر تغيّر معنى الشيفرة ويجب الإبقاء عليها.

كيفية استخدام أداة تصغير JavaScript هذه

  1. الصق شيفرة JavaScript في مربع الإدخال.
  2. اختر "تصغير".
  3. اقرأ النتيجة في مربع الإخراج، إلى جانب الحجم الأصلي والحجم بعد التصغير ونسبة الانخفاض.
  4. اختر "نسخ" لنسخ الشيفرة المصغّرة.

يجري التصغير داخل علامة تبويب المتصفح، لذلك لا تُرفع الشيفرة إلى أي مكان لمعالجتها. كما تنسخ الأداة الشيفرة الملصقة إلى عنوان الصفحة، مما يجعل حفظ النتيجة في الإشارات المرجعية أو مشاركتها أمرًا سهلًا. ولذلك يستطيع كل من يرى ذلك العنوان رؤية الشيفرة.

مثال: تصغير دالة

قبل:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

بعد:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

تختفي التعليقات الثلاثة جميعًا ويزول إزاحة المسافة البادئة. تبقى الفاصلة المنقوطة بعد a+b، لأن الأداة لا تحذف أبدًا فاصلة منقوطة كانت موجودة أصلًا. كما يبقى فاصل السطر قبل const، لأنه يأتي بعد قوس إغلاق }.

مثال: تصغير صنف

قبل:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

بعد:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

لاحظ بقاء فاصل سطر قبل كل أسلوب وقبل قوس إغلاق الصنف }. يأتي كل واحد من فواصل الأسطر هذه بعد قوس إغلاق } في الشيفرة الأصلية، ولذلك تُبقي عليها القاعدة التي تحمي الإدراج التلقائي للفاصلة المنقوطة. كما تبقى الفواصل المنقوطة داخل كل أسلوب.

صيغة تقليل الحجم

تعرض الأداة ثلاثة أرقام أسفل مربع الإخراج: الحجم الأصلي والحجم بعد التصغير ومقدار الانخفاض. جميع الأحجام هي أعداد المحارف، وليست أعداد البايتات. ويُعبَّر عن الانخفاض بنسبة مئوية، مع تقريبها إلى أقرب عدد صحيح:

1reduction = round((1 - minified characters / original characters) x 100)
2

يحتوي مثال الدالة أعلاه على 213 محرفًا قبل التصغير وعلى 103 بعده. لذلك فإن 1–103 / 213 = 0.5164، أي 51.64%، وتعرض الأداة 52%. وينخفض مثال الصنف من 515 محرفًا إلى 304، أي 40.97%، وتعرض النتيجة 41%.

حدود أداة التصغير هذه

تزيل هذه الأداة التعليقات والمسافات البيضاء فقط. وبخلاف أدوات مرحلة البناء مثل Terser أو UglifyJS، فإنها لا تعيد تسمية المتغيرات ولا تحذف الشيفرة غير المستخدمة ولا تدمج الملفات. تنتج تلك الأدوات عادةً مخرجات أصغر، لكنها تحتاج إلى عملية بناء لتشغيلها. أما هذه الأداة فتعمل فورًا في المتصفح من دون إعداد، ولذلك تناسب الفحوص السريعة أو المقاطع الصغيرة أكثر من خط أنابيب إنتاج كامل.

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

ماذا تزيل أداة تصغير JavaScript؟

تزيل التعليقات والمسافات البيضاء غير اللازمة لتشغيل الشيفرة. ولا تزيل الفواصل المنقوطة أو الأقواس أو أي محرف آخر كان جزءًا من الشيفرة أصلًا.

هل يغيّر تصغير JavaScript طريقة تشغيلها؟

لا. ينبغي أن تنتج الشيفرة المصغّرة النتائج نفسها التي تنتجها الشيفرة الأصلية. الذي يتغير هو التنسيق فقط.

لماذا تحتوي الشيفرة المصغّرة أحيانًا على فواصل أسطر؟

قد يكون فاصل السطر مطلوبًا بموجب قاعدة الإدراج التلقائي للفاصلة المنقوطة في JavaScript، أو قد يأتي بعد قوس إغلاق }. وقد يؤدي حذفه إلى تغيير ما تفعله الشيفرة، لذلك تحتفظ الأداة بسطر جديد واحد في تلك المواضع بدلًا من حذفه.

هل التصغير هو نفسه الضغط؟

لا. يزيل التصغير المحارف من الشيفرة المصدرية نفسها. أما الضغط، مثل gzip أو Brotli، فيشفّر الملف بطريقة مختلفة لنقله عبر الشبكة. وتستخدم مواقع الويب عادةً التقنيتين معًا.

هل تُرسل شيفرتي إلى خادم؟

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

هل يمكن إعادة الشيفرة المصغّرة إلى أصلها؟

يمكن لنسّاق الشيفرة استعادة المسافات البيضاء، لكن التعليقات وأسماء المتغيرات والدوال الأصلية تختفي ما لم تُحفَظ خريطة مصدر منفصلة.

المراجع

  1. MDN Web Docs. "Minification." مسرد MDN، https://developer.mozilla.org/en-US/docs/Glossary/Minification
  2. ECMA International. "ECMAScript Language Specification," القسم 12.10، "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
  3. ECMA International. "ECMAScript Language Specification," القسم 12.7.1، "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
  4. ECMA International. "ECMAScript Language Specification," القسم 22.2.6، "Properties of the RegExp Prototype Object" (مجموعة الأعلام d g i m s u v y). https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object