حول أداة ضغط الكود وتنسيقه
تصغّر أداة ضغط الكود ملفات HTML وCSS وJavaScript لتُحمَّل صفحاتك أسرع. وتعمل في الاتجاه المعاكس أيضًا: جمّل الكود المضغوط ليصبح مقروءًا من جديد عند تصحيح الأخطاء أو التعلم.
كيف تعمل الأداة
تتولى كل لغة محركٌ متخصص واسع الاستخدام:
- JavaScript ← Terser. يزيل المسافات والتعليقات، ويقصّر أسماء المتغيرات المحلية، ويحذف الكود الذي لا يُصل إليه، ويبسّط التعابير، دون تغيير ما يفعله الكود. وتُحفظ الأسماء العامة لتستمر السكربتات الأخرى في العمل.
- CSS ← CSSO. إلى جانب إزالة المسافات، يعيد هيكلة ملف الأنماط: يدمج القواعد المكررة، ويختصر الألوان (
#ffffff←#fff)، ويحذف التعريفات التي تُلغيها تعريفات لاحقة. - HTML. تُزال التعليقات والمسافات الزائدة، وتُضغط كتل
<script>و<style>المضمّنة بالمحركين السابقين. ويُحفظ محتوى<pre>و<textarea>كما هو تمامًا.
يستخدم التجميل مكتبة js-beautify لاستعادة المسافات البادئة وفواصل الأسطر.
لماذا تضغط الكود؟
الملفات الأصغر تُحمَّل وتُحلَّل أسرع، خصوصًا على شبكات الهاتف. وهذا يحسّن مؤشرات Core Web Vitals ودرجات سرعة الصفحات، التي تؤثر في تجربة المستخدم وفي الترتيب في محركات البحث معًا. يقلل الضغط عادةً حجم JavaScript وCSS بنسبة 30 إلى 60% قبل الضغط على الخادم، ويتكامل مع gzip أو Brotli.
نصائح
- احتفظ دائمًا بملفات المصدر الأصلية المقروءة، واضغط نسخة منها للإنتاج.
- اختبر الملف المضغوط قبل النشر، خصوصًا كود JavaScript الذي يعتمد على أسماء الدوال أو الأصناف.
- جمّل كود الجهات الخارجية أو الكود المضغوط لتفهم ما يفعله وتبحث فيه بسهولة أكبر.
- إن كانت لديك أداة بناء (Vite أو webpack أو esbuild) فيمكنها الضغط تلقائيًا. وهذه الأداة مثالية للملفات السريعة لمرة واحدة.