کوچک کننده CSS

راهنمای کامل کوچک سازی CSS

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

کوچک سازی چه چیزی را تغییر می دهد (و چه چیزی را نه)

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

کوچک سازی در عملکرد وب کجا جای می گیرد

CSS رندر را مسدود می کند: مرورگرها محتوا را رنگ نمی کنند تا وقتی که شیوه نامه ها را دانلود و تجزیه کنند. روی اتصال موبایل کند، شیوه نامه کوچک نشده 200 کیلوبایتی می تواند یک ثانیه کامل طول بکشد. کوچک سازی معمولا 20 تا 40% صرفه جویی می کند، و با فشرده سازی Brotli کاهش کل به 70 تا 85% می رسد. این یکی از پرسودترین بهینه سازی ها در توسعه وب است چون کاملا خودکار است — یک بار در ساخت خود تنظیم کنید و فراموش کنید. دیگر سودهای عملکرد CSS که با آن جفت می شوند: حذف CSS استفاده نشده، درون خطی کردن CSS حیاتی بالای تاخوردگی، و به تعویق انداختن شیوه نامه های غیر حیاتی.

کوچک سازی در برابر زیبا سازی در برابر نقشه های منبع

گردش کار شما باید سه محصول داشته باشد: منبع (خوانا، با نظرها، و در کنترل نسخه) وساخت کوچک شده (که کاربران دانلود می کنند) و به صورت اختیاری نقشه منبع (.css.map) که به ابزارهای توسعه دهنده مرورگر اجازه می دهد هنگام اشکال زدایی فایل کوچک شده، منبع اصلی را نشان دهند. این ابزار خروجی کوچک شده می سازد؛ برای پروژه های در حال انجام، به جای کوچک سازی دستی در هر استقرار، کوچک سازی را در ساخت خود ادغام کنید (Vite و webpack و PostCSS همه این را با یک افزونه انجام می دهند).

اشتباهات رایج

هکس ها و فیلترها: هک های قدیمی IE می توانند کوچک کننده های ساده را گیج کنند — در مرورگرهای هدف آزمایش کنید. نظرهای مهم: سربرگ های مجوز (مثل /*! ... */) به طور سنتی حفظ می شوند؛ بررسی کنید که کوچک کننده شما آنها را نگه می دارد اگر از نظر قانونی لازم باشند. مجموعه کاراکتر: اگر در CSS کاراکترهای غیر ASCII باشند (رشته های محتوا و نام قلم ها)، مطمئن شوید اعلام @charset "UTF-8" دقیقا به عنوان اولین بایت ها باقی بماند. دو بار کوچک سازی نکنید — این بی ضرر است اما بی فایده، و پردازش دوگانه گاهی موارد لبه را خراب می کند.

یادداشت حریم خصوصی

شیوه نامه های شما ممکن است نظرهایی درباره نام کلاس های افشا کننده یا ویژگی های اعلام نشده داشته باشند. اینجا کوچک سازی 100% در مرورگر شما کار می کند — کد شما هرگز به هیچ سروری نمی رسد.