المصغر CSS

ما يفعله المصغر

التحولات (لا تغير السلوك أبدًا):

• إزالة التعليقات (جميعها، بما في ذلك كتل /*! الخاصة بالترخيص).
• إزالة المسافات البيضاء غير الضرورية (بين المحددات والإعلانات والأقواس).
• إزالة الفواصل المنقوطة قبل إغلاق الأقواس.
• طي القواعد المتعددة الأسطر في سطر واحد.

هذا كل ما يفعله، ولهذا يتصرف الإخراج تمامًا مثل الأصل: كل محدد وخاصية وقيمة يبقى كما كتبته.

الادخار النموذجي

علاوة على التصغير، يضيف ضغط gzip على الخادم توفيرًا آخر بنسبة 60-80% لأن CSS زائدة عن الحاجة إلى حد كبير. المزايا تتجمع؛ افعل الأمرين معًا دائمًا.

ما لا يفعله التصغير

• إزالة CSS غير المستخدمة. هذه منطقة تهز الأشجار/PurgeCSS، الأمر الذي يتطلب تحليل HTML أو مكوناتك.
• تقصير الألوان السداسية أو طي الوحدات الصفرية أو دمج الإعلانات. تلك التحولات القوية من عمل cssnano أو esbuild أو Lightning CSS، وليست من عمل هذه الأداة.
• دمج المحددات المكررة في واحد. محفوف بالمخاطر لأن ترتيب المصدر يؤثر على التتالي؛ يحاول بعض المصغرين أن يتخطاها معظمهم.
• إعادة تسمية الفئات. هذه هي وحدات CSS-in-JS أو CSS، وليس التصغير.
• CSS الحرجة المضمنة. هذه خطوة منفصلة لوقت البناء.

الحفاظ على تعليقات الترخيص

تحتفظ معظم أدوات التصغير بالتعليقات التي تبدأ بـ /*!، المستخدمة لرؤوس الترخيص:

/*! Bootstrap v5.3 · MIT License · https://github.com/twbs/bootstrap */

هذه الأداة تزيل جميع التعليقات. إذا كان CSS الخاص بك يحمل رؤوس ترخيص، فأعد إضافتها بعد التصغير أو استخدم أداة بناء مع خيار الاحتفاظ بالتراخيص مثل cssnano أو esbuild.

خرائط المصدر

لتصحيح أخطاء الإنتاج، تولّد أدوات البناء خريطة مصدر بجانب المخرجات المصغرة:

styles.min.css
styles.min.css.map

يمكن لـ DevTools قراءة الخريطة وإظهار أرقام الأسطر الأصلية المنسَّقة عند فحص أحد العناصر. هذه الأداة لا تولّد خرائط مصدر.

تصغير CSS في مسار البناء

• Vite، Webpack، Parcel: التعامل مع هذا تلقائيًا في عمليات الإنتاج.
• PostCSS مع cssnano: أداة التصغير القياسية المستقلة.
• esbuild: يتضمن أيضًا تصغير CSS.
• إعدادات cssnano المسبقة: default للتحويلات الآمنة، وadvanced للتحويلات العدوانية (مع بعض المفاضلات).

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

عندما يؤدي التصغير إلى تعطيل CSS الخاص بك

نادر ولكنه ممكن:

• المحددات الحساسة للمسافة البيضاء: .foo .bar مقابل .foo.bar، المساحة مهمة.
• قيم الخصائص المخصصة بمسافات: --shadow: 0 2px 4px rgba(0,0,0,0.1)، لا يجب تجريد الفواصل الموجودة داخل rgba().
• حظر التعليقات غير المغلقة: يأكل /* missing close كل شيء بعده. من الممكن أن تتصرف أدوات التصغير بشكل خاطئ عند إدخالها بشكل غير صحيح.

الإصلاح: قم دائمًا بتشغيل مخرجاتك المصغرة من خلال تمريرة الفحص/الاختبار قبل الشحن.