- تعمل عملية التصغير على إزالة الأحرف الزائدة والمسافات البيضاء لتقليل حجم الملف دون تغيير وظائفه.
- تتوفر أدوات متنوعة تتراوح من ضواغط الإنترنت وإضافات VS Code إلى أدوات البناء مثل Vite.
- تضمن أتمتة العملية عبر خطوط بناء المواقع أو وحدات جانب الخادم سرعة موقع ثابتة وتجربة مستخدم مثالية.
هل تساءلت يوماً لماذا تفتح بعض المواقع الإلكترونية فوراً بينما يبدو تحميل مواقع أخرى وكأنه يتم عبر مودم اتصال هاتفي؟ جزء كبير من سرّ ذلك هو تصغير المواردإنها في الأساس فن تنظيف الكود الخاص بك من كل شيء لا يحتاج المتصفح فعليًا إلى قراءته، مما يجعل أصولك خفيفة الوزن وسريعة الاستجابة.
عندما نتحدث عن تصغير ملفات CSS و JavaScript، فإننا لا نغير طريقة عمل الكود؛ نحن فقط إزالة الحشوهذا يعني التخلص من تلك التعليقات المفيدة التي كتبتها لنفسك، وحذف المسافات البيضاء غير الضرورية، وتقصير أسماء المتغيرات. إنه تغيير جذري بالنسبة لـ تقليل استهلاك النطاق الترددي وخفض عدد طلبات HTTP التي يتعين على خادمك معالجتها.
ما هو التصغير بالضبط؟
ببساطة، التصغير هو عملية إزالة بيانات زائدة عن الحاجة من ملفات المصدر الخاصة بك. بينما يحتاج البشر إلى المسافات البادئة والتباعد لقراءة التعليمات البرمجية دون الشعور بالصداع، فإن المتصفحات لا تُعير هذا الأمر أي اهتمام. بإزالة هذه العناصر، يمكنك يمكنك تقليص حجم ملفاتك بنسبة تصل إلى 80%وهذا يترجم مباشرة إلى وقت أسرع للوصول إلى أول بايت (TTFB) وتجربة مستخدم أكثر سلاسة.
هناك عدة جوانب لهذا الأمر. على سبيل المثال، UglifyJS أو Closure Compiler تُستخدم غالبًا في جافا سكريبت، بينما تُستخدم أدوات مثل CSSNano أو csso تتولى بعض المحركات المتقدمة جانب التصميم. بل إنها تقوم بذلك أيضاً. إزالة الكود الميت والطي المستمر، مما يضمن إرسال الكود الذي يتم تنفيذه فعليًا فقط إلى العميل.
طرق لتقليل حجم الكود الخاص بك
بحسب سير عملك، قد تفضل حلاً سريعاً لمرة واحدة أو نظاماً مؤتمتاً بالكامل. أما بالنسبة لمن يحتاجون إلى نتيجة سريعة فقط، ضواغط الإنترنت إنها أداة منقذة. ما عليك سوى لصق الكود الخام أو تحميل ملف، وستقوم الأداة بإنشاء نسخة مضغوطة باستخدام محركات مثل بابيلي-ستاندالون.
إذا كنت تقضي يومك بأكمله في محرر أكواد، ملحقات VS Code هي الخيار الأمثل. هناك إضافات تستخدم محركات مبنية على لغة Rust مثل LightningCSS و oxc-minifyتتميز هذه الإضافات بسرعتها الفائقة لأنها تعمل محليًا ودون اتصال بالإنترنت، مما يعني أنك لست مضطرًا للقلق بشأن قيود واجهة برمجة التطبيقات أو تسريبات الخصوصية. وتتيح لك العديد من هذه الإضافات ما يلي: يتم تصغير حجم الملف تلقائيًا عند الحفظ، خلق شيء .min احصل على نسخة من ملفك فوراً.
بالنسبة لأولئك الذين يخوضون غمار الجانب البرمجي، غالبًا ما يعتمد مطورو PHP على تبعيات Composer مثل matthiasmullie/minifyيتيح لك هذا دمج ملفات متعددة في ملف واحد وحتى قم بضغط المحتوى باستخدام gzip لزيادة الضغط. وهو مفيد بشكل خاص لتعديل المسارات النسبية في CSS بحيث لا تتعطل الصور والخطوط عند نقل الملف إلى دليل الهدف.
الأدوات المتقدمة والأتمتة
عندما تنتقل إلى مجال تطوير مواقع الويب الاحترافية، يصبح تصغير الملفات يدويًا غير عملي. وهنا تكمن المشكلة. أدوات بناء مثل Vite تدخل هذه العوامل حيز التنفيذ. في حين يجد البعض أن عملية الإعداد معقدة بعض الشيء - خاصة عند التعامل مع مسارات دليل الإدخال/الإخراج - يوفر Vite بيئة قوية لـ التجميع والتحسين الأصول اللازمة للإنتاج.
للمشاريع المتخصصة، مثل إضافات للمتصفح Chromeمن التحديات الشائعة الحفاظ على تزامن المعرفات وأسماء الفئات عبر HTML وCSS وJS. باستخدام أداة تصغير موحدة يضمن ذلك معالجة اللغات الثلاث في وقت واحد أنه عند اختصار اسم فئة في CSS الخاص بك، يتم تحديثه بشكل متطابق في HTML و JavaScript، مما يمنع تعطل التخطيط.
حلول بديلة وتحسين جانب الخادم
إذا كنت تفضل لغة بايثون، فستجد مكتبات مثل css-html-js-minify توفر هذه الأدوات نهجًا متعدد المنصات. ويمكنها التعامل مع المجلدات بأكملها بشكل غير متزامن باستخدام المعالجة المتعددة، وهو أمر رائع للمشاريع الضخمة. وغالبًا ما تدعم هذه التقنيات التعتيم والتجزئة، مما يساعد في التخلص من ذاكرة التخزين المؤقت بحيث يحصل المستخدمون دائمًا على أحدث إصدار من موقعك.
ثمة نهج آخر رفيع المستوى يتمثل في استخدام وحدة PageSpeed على خوادم Apache أو Nginx. يسمح هذا للخادم بمعالجة عملية التصغير أثناء التشغيل، مما يعني أن ملفات التطوير الخاصة بك تظل قابلة للقراءة، ولكن يتلقى المستخدم النهائي نسخة محسّنة يتم ذلك تلقائيًا. وهذا يلغي الحاجة إلى خطوة بناء معقدة في بيئتك المحلية.
تحسين أصولك من خلال مزيج من أدوات محلية قائمة على لغة Rust، وخطوط بناء مؤتمتة، وضغط من جانب الخادم يضمن ذلك بقاء موقعك الإلكتروني خفيفًا. من خلال الاستفادة من مزيج من إزالة المسافات البيضاء ومعالجة المتغيرات الذكية، يمكنك تحسين أداء موقعك بشكل كبير. نتائج PageSpeed Insights وحافظ على معدل ارتداد منخفض من خلال توفير تجربة تصفح فائقة السرعة.
