ملفات أصغر للإنتاج، وكود مقروء لتصحيح الأخطاء
تصغّر هذه الأداة CSS وJavaScript وHTML للإنتاج وتعرض لك بدقة مقدار ما وفّرته: الحجم الأصلي، والحجم بعد التصغير، والحجم بعد gzip، وهو ما يحمّله زوارك فعلاً. يُصغَّر JavaScript باستخدام terser، وهو المصغّر الذي تستخدمه معظم أدوات البناء الحديثة، ويُصغَّر CSS باستخدام csso الذي يدمج أيضاً القواعد المكررة. انتقل إلى وضع التنسيق لتحويل حزمة أو ورقة أنماط مصغّرة إلى كود مقروء بمسافات بادئة. تتم معالجة الكود في متصفحك ولا يُرفع أبداً.
كيف تصغّر الكود أو تنسّقه
- 1اختر اللغة: CSS أو JavaScript أو HTML. عند إفلات ملف
.cssأو.jsأو.htmlفي حقل الإدخال تُختار اللغة تلقائياً. - 2اختر تصغير لتقليص الكود أو تنسيق لترتيبه.
- 3اضبط الخيارات: في JavaScript، هل تُختصر الأسماء ويُضغط الكود؛ وفي CSS، هل تُعاد هيكلة القواعد؛ وفي HTML، هل تُصغَّر الأنماط والسكربتات المضمّنة. تبقى تعليقات الترخيص ما لم تُوقف ذلك.
- 4اطّلع على الأحجام أسفل النتيجة لترى التوفير قبل gzip وبعده.
- 5انسخ الناتج أو نزّله بصيغة
.min.jsأو.min.cssأو.html.
ماذا يفعل التصغير
يزيل التصغير كل ما لا يحتاجه المتصفح لتشغيل الكود: التعليقات والمسافات البادئة وفواصل الأسطر والفواصل المنقوطة الاختيارية. والمصغّرات الجيدة تذهب أبعد من ذلك؛ إذ يعيد terser تسمية المتغيرات المحلية بحرف واحد (mangling)، ويحذف الكود الذي لا يمكن الوصول إليه، ويحسب التعابير الثابتة مسبقاً، ويختصر عبارات if إلى عوامل ثلاثية. ويختصر csso الألوان (يصبح #ff0000 هو red)، ويحذف الوحدات من القيم الصفرية، ويدمج القواعد ذات التصريحات أو المحددات المتطابقة.
تعمل النتيجة تماماً مثل الأصل، لكنها عادةً أصغر بنسبة 30–70% في JavaScript و15–40% في CSS قبل الضغط.
لماذا يهم الحجم بعد gzip
تضغط خوادم الويب وشبكات CDN الملفات النصية باستخدام gzip أو Brotli قبل إرسالها، لذا فالرقم الذي يؤثر في وقت التحميل هو الحجم المضغوط لا الحجم الخام. يزيل الضغط أصلاً كثيراً من التكرار الذي يستهدفه التصغير، ولهذا قد يتقلص توفير 60% من التصغير إلى 20% بعد gzip. ومع ذلك يبقى مفيداً في كل عرض للصفحة، ويستمر اختصار الأسماء خصوصاً في تحقيق فائدة بعد الضغط.
يستخدم رقم gzip هنا المستوى 6، وهو الافتراضي في nginx ومعظم الخوادم. وعادةً ما يكون Brotli أصغر بنسبة 10–20% إضافية.
شرح الخيارات
- اختصار الأسماء
- يعيد تسمية المتغيرات المحلية ومعاملات الدوال بأسماء قصيرة. لا تُغيَّر الأسماء العامة وخصائص الكائنات أبداً، لذا يستمر الكود الذي تستدعيه سكربتات أخرى في العمل.
- ضغط
- في JavaScript، مراحل التحسين في terser: حذف الكود الميت، وطيّ الثوابت، والتضمين. وفي CSS، إعادة الهيكلة في csso التي تدمج القواعد وتعيد ترتيبها حيث يكون ذلك آمناً.
- الإبقاء على تعليقات الترخيص
- يُبقي التعليقات التي تبدأ بـ /*! أو تحتوي على @license أو @preserve، والتي تشترط كثير من تراخيص المصدر المفتوح الاحتفاظ بها.
- CSS وJS المضمّنان
- في HTML، يصغّر محتوى عناصر <style> و<script> وسمات style. وتُضغط كتل JSON-LD أيضاً؛ أما السكربتات من أنواع أخرى فتُترك كما هي.
- إزالة علامات اقتباس السمات
- يكتب class=nav بدلاً من class="nav" حيث يسمح HTML بذلك. هذا HTML صالح، لكن بعض أدوات XML وأنظمة القوالب لا تتعامل معه جيداً، لذا يكون الخيار معطلاً افتراضياً.
كيف يُصغَّر HTML
تصغير HTML هنا متحفظ عن قصد. تُحذف التعليقات باستثناء التعليقات الشرطية لـ Internet Explorer. تُختصر سلاسل المسافات إلى مسافة واحدة، وتُحذف المسافات المجاورة للعناصر الكتلية مثل <div> و<p> حيث لا تظهر أبداً. وتبقى دائماً مسافة واحدة بين العناصر السطرية، لأن حذفها سيدمج <b>big</b> <i>world</i> في كلمة واحدة. ولا يُمس محتوى <pre> و<textarea> أبداً.
إذا احتوى سكربت مضمّن على خطأ في الصياغة، يُترك كما كان تماماً ويُخبرك بالسطر الذي فيه الخطأ، بدلاً من فشل الصفحة بأكملها.
تنسيق الكود المصغّر
يستخدم التنسيق js-beautify لإعادة المسافات البادئة: عبارة واحدة في كل سطر في JavaScript، وتصريح واحد في كل سطر في CSS، ومسافات بادئة متداخلة في HTML. إنها أسرع طريقة لقراءة سكربت خارجي مصغّر أو فهم ورقة أنماط منسوخة من المتصفح. لا يمكن للتنسيق استعادة أسماء المتغيرات الأصلية أو التعليقات التي حذفها المصغّر، لكن البنية تصبح سهلة التتبع.
للتنسيقات الأخرى، جرّب JSON Formatter ومنسّق SQL.
الأسئلة الشائعة
- هل يُرفع الكود الخاص بي إلى أي مكان؟
- لا. تعمل terser وcsso وjs-beautify في متصفحك، لذا يبقى الكود على جهازك.
- هل سيظل JavaScript المصغّر يعمل؟
- نعم. لا يجري terser إلا تغييرات تحافظ على السلوك. أما الكود الذي يعتمد على أسماء الدوال أو الأصناف وقت التشغيل، مثل بعض أطر حقن التبعيات، فقد يحتاج إلى إيقاف اختصار الأسماء.
- هل يدعم JavaScript الحديث ووحدات ES؟
- نعم. يفهم terser الصياغة الحديثة بما فيها الأصناف وasync/await وoptional chaining وtop-level await. وتُصغَّر الملفات التي تحتوي على import أو export كوحدات ES.
- هل يمكن تصغير TypeScript أو JSX؟
- لا. حوّل TypeScript أو JSX إلى JavaScript أولاً ثم صغّر الناتج. وإذا لم يكن الكود JavaScript عادياً، يظهر خطأ صياغة مع رقم السطر والعمود.
- ما الفرق بين التصغير وgzip؟
- التصغير يعيد كتابة الكود نفسه ليصبح أقصر. أما gzip فهو ضغط يطبّقه الخادم على أي ملف عند إرساله. يعملان معاً: صغّر أولاً، ثم دع الخادم يضغط.
- هل يمكنني إلغاء تصغير JavaScript أو CSS؟
- نعم. اختر تنسيق لإعادة المسافات البادئة للكود المصغّر. لا يمكن استعادة أسماء المتغيرات والتعليقات الأصلية، لكن البنية تصبح مقروءة.
- لماذا تُدمج قواعد CSS لدي أو يُعاد ترتيبها؟
- هذه إعادة الهيكلة في csso، وهي تدمج القواعد ذات التصريحات أو المحددات نفسها. إنها آمنة لأوراق الأنماط العادية؛ أوقف خيار ضغط إذا كنت تعتمد على ترتيب دقيق للقواعد بين محددات متساوية الأولوية.