تصغير CSS

ديميان رينزولي

Twitter GitHub Glitch

يمكن أن تحتوي ملفات CSS على أحرف غير ضرورية، مثل التعليقات والمسافات البيضاء والمسافات البادئة. وفي مرحلة الإنتاج، يمكن إزالة هذه الأحرف بأمان لتقليل حجم الملف بدون التأثير في كيفية معالجة المتصفِّح للأنماط. ويُطلَق على هذه التقنية تصغير.

جارٍ تحميل CSS غير مصغّر

يمكنك الاطّلاع على كتلة CSS التالية:

body {
  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  margin: 2em;
}

/* all titles need to have the same font, color and background */
h1 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

h2 {
  font-style: italic;
  color: #373fff;
  background-color: #000000;
}

هذا المحتوى سهل القراءة، على حساب إنتاج ملف أكبر من اللازم:

• وهو يستخدم مسافات لأغراض وضع المسافات البادئة ويحتوي على تعليقات يتجاهلها المتصفّح كي تتم إزالتها.
• العنصران <h1> و<h2> لهما النمط نفسه: بدلاً من تعريفهما بشكل منفصل: "h1 {...} h2 {...}"، يمكن التعبير عنهما بـ "h1, h2{...}".
• يمكن التعبير عن background-color، #000000 على أنه #000 فقط.

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

body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}

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

قياس

سيتم تطبيق تصغير CSS على موقع إلكتروني تم استخدامه في أدلة أخرى: Fav Kitets يستخدم هذا الإصدار من الموقع مكتبة CSS رائعة، وهي animate.css، لتحريك عناصر مختلفة من الصفحة عندما يصوّت المستخدم على قطة ☔.

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

1. افتح صفحة القياس.
2. أدخِل عنوان URL: https://fav-kitties-animated.glitch.me وانقر على تشغيل التدقيق.
3. انقر على عرض التقرير.
4. انقر على الأداء وانتقِل إلى قسم الفرص.

يوضح التقرير الناتج أنه يمكن حفظ ما يصل إلى 16 كيلوبايت من ملف animate.css:

افحص محتوى CSS الآن:

1. افتح موقع Fav Kitets في Chrome. (قد تستغرق استجابة خوادم Glitch بعض الوقت في المرة الأولى).
2. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
3. انقر على علامة التبويب الشبكة.
4. انقر على فلتر CSS.
5. ضع علامة في مربع الاختيار إيقاف ذاكرة التخزين المؤقت.
6. أعِد تحميل التطبيق.

تطلب الصفحة ملفي CSS، بحجم 1.9 كيلوبايت و76.2 كيلوبايت على التوالي.

1. انقر على animate.css.
2. انقر على علامة التبويب الاستجابة للاطّلاع على محتوى الملف.

لاحظ أن ورقة الأنماط تحتوي على أحرف للمسافات البيضاء والمسافة البادئة:

بعد ذلك، ستضيف بعض المكوّنات الإضافية لحزمة الويب إلى عملية الإنشاء لتصغير هذه الملفات.

ملاحظة: ملاحظة: يسرد تقرير Lighthouse السابق فقط animate.css كفرصة لتصغير الحجم. سيؤدي تصغير style.css أيضًا إلى توفير بعض وحدات البايت، ولكن ليس كافيًا أن تعتبره أداة Lighthouse أنّه تم إخلاء جزء كبير من مساحة التخزين. ومع ذلك، يُعدّ تصغير ملفات CSS من أفضل الممارسات العامة، لذا من المنطقي تصغير جميع ملفات CSS.

تصغير CSS باستخدام حزمة الويب

قبل الانتقال إلى التحسينات، خصص بعض الوقت لفهم آلية عمل موقع Fav Kitters الإلكتروني:

بشكل تلقائي، ستحتوي حزمة JavaScript الناتجة التي تنتجها حزمة الويب على محتوى ملفات CSS المضمّنة. ونظرًا لأننا نريد الاحتفاظ بملفات CSS منفصلة، فإننا نستخدم مكونين تكميليين:

• mini-css-extract-plugin: استخراج كل ورقة أنماط إلى ملفها الخاص، كإحدى خطوات عملية الإنشاء.
• يتم استخدام webpack-fix-style-only-entries لتصحيح مشكلة في Wepback 4، لتجنب إنشاء ملف JS إضافي لكل ملف CSS مُدرَج في webpack-config.js.

ستقوم الآن بإجراء بعض التغييرات في المشروع:

1. افتح مشروع Fav Kitets في Glitch.
2. لعرض المصدر، اضغط على عرض المصدر.
3. انقر على Remix to Edit (إنشاء ريمكس) لجعل المشروع قابلاً للتعديل.
4. انقر على Terminal (ملاحظة: إذا لم يظهر زر الوحدة الطرفية، قد تحتاج إلى استخدام خيار ملء الشاشة).

لتصغير ملف CSS الناتج، عليك استخدام optimize-css-assets-webpack-plugin:

1. في وحدة التحكّم في Glitch، شغِّل npm install --save-dev optimize-css-assets-webpack-plugin.
2. شغِّل refresh، حتى تتم مزامنة التغييرات مع محرِّر Glitch.

بعد ذلك، ارجع إلى محرِّر Glitch، وافتح ملف webpack.config.js، وأدخِل التعديلات التالية:

حمِّل الوحدة في بداية الملف: js const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

وبعد ذلك، أدخِل مثيلاً من المكوّن الإضافي إلى مصفوفة Plugins: js plugins: [ new HtmlWebpackPlugin({template: "./src/index.html"}), new MiniCssExtractPlugin({filename: "[name].css"}), new FixStyleOnlyEntriesPlugin(), new OptimizeCSSAssetsPlugin({}) ] بعد إجراء التغييرات، سيتم تشغيل إعادة إنشاء المشروع. سيظهر ملف webpack.config.js الناتج على النحو التالي:

بعد ذلك، ستطّلع على نتيجة هذا التحسين باستخدام أدوات الأداء.

إثبات الهوية

• لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .

إذا ضللت مسارك في أي خطوة سابقة، يمكنك النقر هنا، لفتح نسخة محسّنة من الموقع.

لفحص حجم الملفات ومحتواها:

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوري البرامج".
2. انقر على علامة التبويب الشبكة.
3. انقر على فلتر CSS.
4. ضَع علامة في مربّع الاختيار إيقاف ذاكرة التخزين المؤقت إذا لم يكن كذلك.
5. أعِد تحميل التطبيق.

يمكنك فحص هذه الملفات والتأكد من أنّ النُسخ الجديدة لا تحتوي على أي مسافات بيضاء. كلا الملفين أصغر بكثير، على وجه الخصوص، تم تخفيض حجم animate.css بنسبة ~26%، ما توفير ~26%.

كخطوة أخيرة، يمكنك إجراء ما يلي:

1. افتح صفحة القياس.
2. أدخِل عنوان URL للموقع الإلكتروني الذي تم تحسينه.
3. انقر على عرض التقرير.
4. انقر على الأداء وابحث عن قسم الفرص.

لم يعُد التقرير يعرض عبارة "تصغير CSS" ضمن "فرصة التحسين"، وتم نقله الآن إلى قسم "عمليات التدقيق التي تم اجتيازها":

بما أنّ ملفات CSS هي موارد تحظر العرض، في حال تطبيق عملية تصغير على مواقع إلكترونية تستخدم ملفات CSS كبيرة، يمكنك ملاحظة تحسينات على مقاييس مثل سرعة عرض المحتوى على الصفحة.

الخطوات التالية والموارد

في هذا الدليل، تحدّثنا عن تصغير ملفات CSS باستخدام حزمة الويب، ولكن يمكن اتّباع النهج نفسه مع أدوات إنشاء أخرى، مثل gulp-clean-css لـ Gulp أو grunt-contrib-cssmin لنظام Grunt.

يمكن أيضًا تطبيق عملية التصغير على أنواع أخرى من الملفات. اطّلِع على دليل تصغير أحمال الشبكة وضغطها لمعرفة مزيد من المعلومات حول أدوات تصغير لغة JavaScript، وبعض الأساليب التكميلية، مثل الضغط.