بهینه سازی فایل css

بهینه سازی فایل CSS

به عنوان یک طراح سایت و یک 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:before{margin: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:before{margin:10px 20px;color:red;-webkit-border-radius:16px;border-radius:16px;font-weight:400}

 

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

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

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

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

  • npm csso
  • gulp-csso
  • grunt-csso
  •  

    cssnano

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

     

    
    h1:before{margin:10px 20px;color:red;border-radius:1pc;font-weight:400}
    
    

     

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

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

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

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