به عنوان یک طراح وبسایت و مرکز خبرهای جدید و همچنین یک CSS کار خیلی خیلی خیلی کار درست قطعا دائما فایل CSS را minify می کنید. جهت آنهایی که هنوز به مرحله “خیلی خیلی خیلی” نرسیدند و همچنین می خواهند بدانند معنی minify کردن چیست بایستی و حتما گفت عملیاتی می باشد که روی یک فایل انجام می می شود تا مواردی شامل کامنت ها, فضاهای خالی و همچنین اینترهای اضافی که در کد وجود دارند را حذف کند. در واقع با آن کار ما فایل مورد نظر را تا جایی که امکان دارد می چلانیم تا به کم حجم ترین حالت ممکن برسد.

کد زیر را در نظر بگیرید:

h1::before, h1:before 
margin: 10px 20px 10px 20px;
color: #ff0000;
-webkit-border-radius: 16px;
border-radius: 16px;
font-weight: normal;
font-weight: normal;

در صورتی که از یک minify کننده ساده بهره بری و استفاده کنیم پس نتیجه آن می شود که بصورت زیر خواهد بود:

h1::before,h1:beforemargin:10px 20px 10px 20px;color:#ff0000;-webkit-border-radius:16px;border-radius:16px;font-weight:normal;font-weight:normal

همانطور که دیدن می کنید تنها اتفاقی که افتاد خذف فضاهای اضافی و همچنین اینترها بودند. ولی باید توجه داشت آیا می توانیم خروجی بهینه تری داشته باشیم؟ در ادامه نیت و اراده داریم تا ابزارهایی را معرفی کنیم تا بتوانیم فایل مظلوم CSS را اکثرا و بیشتر بچلانیم:

CSSO

در وبسایت و مرکز خبرهای جدید گیتهاب پروژه ای معرفی شده می باشد به نام CSSO که پا را کمی فراتر می گذارد و همچنین با تیم بندی کردن انتخابگرها, کوتاه کردن سینتکس در جاهایی که امکان وجود دارد و همچنین مواردی دیگر, حجم فایل CSS را کمی اکثرا و بیشتر کاهش می دهد.

نمونه کد ما بعد از انجام بهینه سازی توسط آن ابزار بصورت زیر خواهد بود:

h1::before,h1:beforemargin:10px 20px;color:red;-webkit-border-radius:16px;border-radius:16px;font-weight:400

اتفاقایی که افتاد به قرار زیر خواهند بود:

• مقدار ویژگی margin بهینه سازی شد. آن بدین معنی می باشد که آن ابزار به خلاصه نویسی ویژگی ها و همچنین مقادیر آنها اهمیت می دهد.
• ff0000# به red تغییر پیدا کردن شده می باشد زیرا و به درستی که red تعداد کاراکترهای کمتری دارد.
• مقدار normal جهت ویژگی font-weight به ۴۰۰ تغییر پیدا کردن شده می باشد. (باز هم به دلیل کاهش کاراکترها)
• دستور اضافه ای که نوشته شده (;font-weight:normal) حذف شده می باشد.

آن ها مواردی بودند که در آن مثال وجود داشت, ولی باید توجه داشت آن ابزار بهینه سازی های غیره ای هم انجام می دهد. که می توانید خودتان در آدرس زیر آزمایش کنید:

همینطور در صورتی که در مراحل کاری خود از gulp و همچنین یا grunt و همچنین یا خود npm بهره بری و استفاده می کنید, آن ابزار جهت آن موارد هم پلاگین دارد:

cssnano

آن ابزار هم بصورت متن باز در گیتهاب وجود دارد. cssnano نسبت به csso کمی گزینه های بیشتری جهت بهینه سازی در اختیار ما قرار می دهد. در مثال ما پس نتیجه آن می شود که بهینه سازی بصورت زیر خواهد بود:

h1:beforemargin:10px 20px;color:red;border-radius:1pc;font-weight:400

مواردی که آن ابزار بهینه می کند خیلی شفاف در اینجا توضیح داده شده می باشد.

همچنین مثل ابزار قبل می توانید با توجه به نحوه مراحل کاری خود از پلاگین های مختلفی که جهت آن ابزار نوشته شده اند بهره بری و استفاده کنید. از پلاگین ویرایشگر اتم گرفته تا gulp و همچنین grunt که توضیحات کامل در مورد نحوه بهره بری و استفاده از آن ابزار را می توانید در وبسایت و مرکز خبرهای جدید خودش مطالعه کنید.

 
بهره بری و استفاده از اینگونه ابزارها ریسک خاص خود را دارد. ولی باید توجه داشت شرکت های بزرگی از آن ابزارها بهره بری و استفاده می کنند و همچنین هنوز هم به مشکل بر نخورده اند. از طرفی می توانید از طریق تنظیم کردن گزینه های بهینه سازی در آن ابزارها ریسک را کنترل کنید.
همچنین زیرا و به درستی که آن ابزارها بصورت متن باز در دسترس خواهند بود در صورتی که با مشکلی مواجه شدید کافی می باشد تا در گیتهاب جهت پروژه مربوطه مشکل را معرفی کنید تا در ورژن و نسخه بعدی رفع می شود.

 
کمک هم خواستید تا جایی که وقت و همچنین سوادم اجازه بده در خدمتم. بعد از همین امروز بهره بری و استفاده کنید خیالتون راحت