تصغير وتجميل HTML وCSS وJavaScript

اتجاهان

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

ما يفعله كل مُصغّر

• JavaScript مع Terser: يزيل المسافات والتعليقات، ومع اختصار أسماء المتغيرات يستبدل المتغيرات المحلية بحروف مفردة. وضغط الكود يزيل أيضًا الشيفرة التي لا تعمل أبدًا ويبسّط التعبيرات. واختصار الأسماء عالية المستوى يذهب أبعد، وهو آمن فقط في السكربتات التي لا تصل إليها سكربتات أخرى بأسماء عامة. وإزالة استدعاءات console تحذف سجلات التطوير.
• CSS مع CSSO: يزيل المسافات والتعليقات، ويختصر الألوان والقيم، ومع دمج القواعد وإعادة ترتيبها يجمع القواعد التي تشترك في المحددات أو التصريحات. أوقفه إن كانت أنماطك تعتمد على ترتيب القواعد بطريقة لا يستطيع CSSO رؤيتها.
• HTML مع html-minifier-terser: يطوي المسافات بين الوسوم، ويزيل التعليقات، ويمكنه تصغير CSS وJavaScript داخل وسوم <style> و<script> في الوقت نفسه.

تعليقات الترخيص التي تبدأ بـ/*! يمكن إبقاؤها، لأن تراخيص مفتوحة المصدر كثيرة تشترط أن يرافق الإشعار الشيفرة.

كم يوفر

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

متى تستخدمه

أدوات البناء الحديثة مثل Vite وwebpack وesbuild تصغّر تلقائيًا، فهذه الصفحة لكل ما عدا ذلك: سكربت على موقع بسيط، أو مقتطف لقالب بريد أو نظام إدارة محتوى، أو التحقق مما ستنتجه أداة بناء، أو قراءة شيفرة موقع مصغّرة أثناء التصحيح. احتفظ بالأصل المقروء في مشروعك وانشر النسخة المصغّرة؛ فالشيفرة المصغّرة ليست للتحرير.

إذا حدث خطأ

• يبلّغ عن خطأ في الصياغة. لا يمكن تحليل الشيفرة. الرسالة تحدد السطر؛ أصلحه في الأصل.
• تتعطل الصفحة بعد تصغير JavaScript. شيء يعتمد على اسم اختُصر، غالبًا عبر متغير عام. أوقف اختصار الأسماء عالية المستوى، ثم اختصار أسماء المتغيرات.
• تتغير الأنماط بعد تصغير CSS. أوقف دمج القواعد وإعادة ترتيبها.
• اختفت مسافات بين العناصر السطرية في HTML. طي المسافات قد يضم الكلمات عبر الوسوم. أبقِ مسافة داخل النص، أو أوقف طي المسافات البيضاء.