فشرده سازی فایل های CSS

فشرده سازی

ابزار آنلاین کاهش حجم کدهای CSS

Minification فرآیند کاهش اندازه کد برای کاهش حجم فایل های شما است. چگونه این کار برای CSS اعمال میشود؟

به این کد دقت کنید:

h1 {
	color: yellow;
}

p {
	color: pink;
}

و نسخه فشرده آن:

h1{color: yellow} p{color:pink}

این دو بلوک کد یکسان هستند و به یک شکل کار میکنند زیرا syntax (فرم) CSS درستی دارند. اما دو تفاوت بین این بلوک های کد وجود دارد:

• اولی خواناتر و قابل فهم تر از دومی است.
• اولی در مقایسه با دومی حجم فایل بزرگتری دارد.

در هنگام آزمایش این کد روی کامپیوتر، اندازه اولی 46 بایت است در حالی که دومی 40 بایت است. این تفاوت ممکن است ناچیز به نظر برسد، اما اگر زمانی که یک نسخه فشرده از یک پایگاه کد بزرگتر میتواند ایجاد کند در نظر بگیرید، قابل توجه میشود.

چرا اندازه فشرده سازی کدها مهم است؟

هنگامی که یک مرورگر یک document (سند) HTML را از یک سرور دریافت میکند، منابع پیوند شده در سند را واکشی میکند. این منابع شامل تصاویر، اسکریپت ها و همچنین شیوه نامه ها هستند. هر چه یک فایل CSS بزرگتر باشد، برای دانلود به منابع بیشتری (مانند پهنای باند شبکه) نیاز دارد. همچنین، دانلود چنین فایل هایی بیشتر طول میکشد. این باعث کاهش زمان بارگذاری صفحه میشود و بر تجربه کلی کاربر تأثیر می گذارد. این هزینه ها را میتوان برای فایل های CSS کوچک نادیده گرفت، اما با رشد برنامه، فشرده سازی به یک عامل اساسی در بهبود زمان بارگذاری صفحه تبدیل میشود.

مرورگر فقط به CSS معتبر نیاز دارد، CSS قابل خواندن یا قالب بندی نشده است

اندازه فایل های فشرده بر نحوه تجزیه CSS توسط مرورگر تأثیری ندارد. مرورگر نیازی به CSS قابل خواندن ندارد تا بتواند آن را در یک صفحه وب تفسیر کند. فقط به CSS معتبر نیاز دارد (کد CSS با نحو صحیح - پرانتزها، نیم فاصله و غیره). بنابراین، فاصله ها، نظرات و تورفتگی های اضافی برای مرورگر مهم نیست. فقط برای توسعه مهم است.

برای برنامه های کاربردی مستقر، به نسخه قابل توزیع CSS نیاز دارید. نسخه قابل توزیع قرار نیست توسط انسان ها خوانده شود یا در طول توسعه استفاده شود - بلکه برای برنامه های کاربردی استفاده میشود زیرا فقط برای مرورگر مهم هستند.

CSS فشرده شده چگونه کار میکند؟

هدف حذف قسمت هایی از کد CSS شما است که برای تفسیر CSS به مرورگر بی ربط هستند.

برای مثال این کد:

h1 {
/* a header */
	color: yellow;
}

در اینجا یک نمایش گرافیکی از بخش هایی از کد که اهمیت دارند و آنهایی که اهمیت ندارند، آورده شده است:

نظرات کد میتواند به توسعه دهندگان کمک کند تا با هم کار کنند و هدف بخش های مختلف کد را درک کنند. اما مرورگر به این اطلاعات نیاز ندارد. فاصله ها، خوانایی کد توسط انسان را بهبود می بخشد، اما مرورگر میتواند کد را بدون فاصله بخواند. انتخابگر، پرانتزها و نیم دو نقطه (;) بخش های ضروری کد هستند زیرا از سینتکس CSS پیروی میکنند و به مرورگر کمک میکنند تا کد را به درستی تفسیر کند. روش های کوچک سازی CSS این بخش هایی را که مرورگر به آنها نیاز ندارد از کد میگیرد که در نتیجه فایلی با حجم کمتر ایجاد میشود و باعث میشود مرورگر سریع تر این فایل ها را از سرور دانلود کند.

نسخه کوچک شده کد بالا به صورت زیر است:

h1{color:yellow}

و همه چیز هنوز در مرورگر کاملاً کار میکند.

چگونه کدهای CSS را کوچک کنیم؟

اکنون ارتباط فایل های CSS فشرده و نحوه کار آنها را درک میکنید. بنابراین چگونه میتوانید فایل های CSS خود را کوچک کنید؟ البته، شما نمیتوانید کدهای CSS کوچک شده را در طول توسعه بنویسید زیرا همکاری، خواندن و درک کد را دشوار میکند. در اینجا چند ابزار وجود دارد که میتوانید از آنها برای کوچک کردن CSS خود استفاده کنید.

فشرده سازی کدهای CSS در uNext

در قسمت ابزارهای سایت uNext میتوانید کدهای CSS خود را فشرده و کوچک کنید. این ابزار توسط تیم برنامه نویسی تهیه شده است فقط کافی است کدهای CSS خود را در کادر CSS Codes قرار داده و دکمه تبدیل را بزنید در کادر پایین کدهایی CSS کوچک شده نمایش داده میشود که میتوانید از آن استفاده کنید.

clean-css

clean-css یک کتابخانه NPM است که میتوانید از آن برای کوچک کردن فایل های CSS خود به صورت محلی یا از یک سرور راه دور استفاده کنید.

Toptal CSS Minifier

Toptal CSS Minifier یک رابط کاربری برای اضافه کردن CSS شما و دیدن خروجی کوچک شده ارائه میدهد. همچنین API و افزونه هایی ارائه میکند که فرآیند را خودکار میکند.

جمع بندی

به طور کلی Minification، یک روش عالی برای بهینه سازی وب سایت ها است. کوچک کردن فایل های CSS زمان بارگذاری صفحه را افزایش میدهد و به منابع کمتری توسط مرورگر برای دانلود نیاز دارد. در طول توسعه، نظرات، تورفتگی و سایر اشکال قالب بندی، خوانایی کد و همکاری را بهبود می بخشند. درحالی که مرورگر به آن نیاز ندارد. کوچک سازی CSS فرآیند فشرده سازی اندازه فایل های CSS با حذف بخشی نامربوط از فایل هایی است که مرورگر نیازی به تفسیر آن در یک صفحه وب ندارد. خوشبختانه، برخی از ابزارها این کار را آسان تر میکنند، بنابراین میتوانید از روند توسعه لذت ببرید و در پایان نسخه توزیع شده را نیز دریافت کنید.

اشتراک در شبکه های اجتماعی: