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% آپ کے براؤزر میں کام کرتی ہے — آپ کا کوڈ کبھی کسی سرور کو نہیں چھوتا۔