تطوير الويب

JS Minify / Beautify

ضغط JavaScript للإنتاج أو تنسيق الكود المصغّر إلى شكل سهل القراءة.


                        
                    

Minifying JavaScript strips whitespace, comments, and line breaks, and often shortens local variable names — none of that changes how the code runs, but it noticeably shrinks the file for a faster load.

How to use it

Common uses

Things to keep in mind

Minification isn't obfuscation — variables get renamed to shrink size, not to hide logic; serious obfuscation needs dedicated specialized tools.

Minified code in production without a source map is hard to debug — the line numbers in error messages won't match the original file.

مقالة عن هذه الأداة: تصغير JavaScript: الفرق بين التصغير والتعتيم

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

ما الأداة التي يستخدمها المصغّر خلف الكواليس؟

يستخدم terser، وهو مصغّر ومضغط JavaScript يُستخدم على نطاق واسع ويفهم أيضًا الصياغة الحديثة.

لماذا يصعب تصحيح أخطاء JavaScript المصغّر؟

يختصر terser أسماء المتغيرات والدوال ويزيل المسافات البيضاء والتعليقات، وبما أن هذه الأداة لا تُنشئ خريطة مصدر (source map)، لا يمكن لأدوات مطوري المتصفح ربط الكود المصغّر بالأسطر الأصلية القابلة للقراءة.

هل سيؤدي التصغير إلى كسر كودي؟

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

ما الفرق بين Tree shaking والتصغير؟

يحذف Tree shaking من الحزمة الكود غير المستخدم في أي مكان، عبر تحليل رسم بياني لاعتماديات الوحدات أثناء البناء، بينما يقتصر التصغير على اختصار التمثيل النصي للكود الموجود أصلًا — لا يحذف أي دالة تُنفَّذ فعليًا.

هل من الآمن استخدام JavaScript مصغّر في الإنتاج دون اختبار إضافي؟

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

مقالات: تطوير الويب

HEX وRGB وHSL: لماذا توجد طرق عديدة لكتابة اللون

لماذا يفضّل المصممون غالبًا HSL على HEX عند اختيار درجة لون يدويًا.

تصغير CSS: ما الذي يُحذَف فعليًا من الملف ولماذا

لماذا يعمل CSS المصغّر بنفس الطريقة تمامًا في المتصفح رغم أنه يصبح غير قابل للقراءة للإنسان.

تصغير HTML: لماذا تهم المسافات في الترميز أصلًا

لماذا يمكن أن يكسر حذف المسافات داخل <pre> أو textarea مظهر الصفحة، بخلاف أي مكان آخر تقريبًا.

تدرجات CSS: كيف يختلف linear عن radial وconic

لماذا يناسب conic-gradient الرسوم البيانية الدائرية بينما يعطي radial-gradient تأثير بقعة ضوء.

خوارزمية لون: كيف يُتحقَّق من صحة رقم البطاقة

لماذا لا يعني رقم بطاقة يجتاز فحص لون أن هذه البطاقة موجودة فعلًا.

IBAN: كيف يُبنى رقم الحساب المصرفي الدولي

لماذا الحرفان الأولان في IBAN هما رمز الدولة، لا جزءًا من رقم الحساب نفسه.

رموز QR: كيف يتّسع رابط داخل مربع من البكسلات

لماذا يظل رمز QR بشعار في المنتصف قابلًا للمسح رغم تغطية جزء من النمط.

الباركود: كيف يختلف Code 128 عن EAN-13

لماذا تستخدم المنتجات على أرفف المتاجر EAN-13 دائمًا تقريبًا بدلًا من Code 128.

صور Placeholder: لماذا تهم الصور الوهمية أثناء التطوير

لماذا يضع المطورون عمدًا مستطيلات رمادية بدلًا من صور حقيقية بينما التخطيط لا يزال قيد البناء.