JavaScript منی فائی کریں _

JavaScript منی فائنگ کیسے کام کرتی ہے؟

Terser آپ کے code کے Abstract Syntax Tree پر چار مراحل میں کام کرتا ہے۔ ہر مرحلہ آزاد ہے، اس لیے آپ کوئی بھی آن یا آف کر سکتے ہیں بغیر باقیوں کو توڑے۔

1. Parse. Terser آپ کے JavaScript کو AST میں parse کرتا ہے۔ کوئی بھی syntax error یہاں اس token اور سطر کے ساتھ ظاہر ہوتی ہے جس نے اسے پیدا کیا، تاکہ کوئی بھی transform چلنے سے پہلے آپ اصل مسئلہ پائیں۔ پارسر latest stage-4 proposals تک ہر معیاری ECMAScript construct قبول کرتا ہے۔
2. Compress. compressor AST پر چلتا ہے اور درجنوں semantics-preserving transforms لاگو کرتا ہے: constant folding، dead-branch elimination، مختصر pure functions کی inlining، یکے بعد دیگرے var declarations کو جوڑنا، اور مساوی statement forms کو دوبارہ لکھنا (if/else کو ternaries میں، comparison-chain چھوٹا کرنا، conditional return جوڑنا)۔ ہر transform اصولاً قابل واپسی ہے؛ compressor observable رویہ کبھی نہیں بدلتا۔
3. Mangle. mangler ہر scope میں local bindings کو سب سے چھوٹے unique identifiers (a، b، c، …) میں بدلتا ہے۔ صرف وہ نام بدلے جاتے ہیں جو module boundary سے باہر نہیں جا سکتے، اس لیے exported bindings، property keys اور global references محفوظ رہتے ہیں۔ نتیجہ کسی بھی مرحلے کی سب سے بڑی بائٹ بچت ہے۔
4. Render. Terser transformed AST کو واپس ایک JavaScript string میں print کرتا ہے جس میں سفید جگہ جمع اور statement separators grammar کے مطابق کم سے کم ہو جاتے ہیں۔ تبصرے ہٹ جاتے ہیں جب تک preserve-license ٹوگل /*! … */ blocks نہ رکھے، جو زیادہ تر CDN licences کے لیے ضروری ہے۔

JavaScript منی فائی کیوں کریں؟

• صفحات تیز لوڈ ہوتے ہیں. چھوٹے scripts جلدی parse اور execute ہوتے ہیں۔ 4G موبائل کنکشن پر 40 فیصد byte کمی Time to Interactive سے حقیقی سیکنڈ کم کرتی ہے، جو Google کے PageSpeed Insights کا سب سے aggressive metric ہے۔
• CDN egress کم خرچ. CloudFront، Cloudflare اور Fastly گیگابائٹ egress کے حساب سے فیس لیتے ہیں۔ ماہانہ لاکھوں صفحہ ویوز میں 40 فیصد script کمی کوئی image یا CSS کام آنے سے پہلے ہی حقیقی بچت میں بدل جاتی ہے۔ یہ حساب gzip اور brotli کے بعد بھی کام کرتا ہے — منی فائنگ وہ tokens ہٹاتی ہے جنہیں compressor ویسے encode کرتا۔
• یہ منی فائر آپ کے صفحے پر بوجھ نہیں ڈالتا. Terser ~1 MB uncompressed ہے۔ زیادہ تر آن لائن منی فائرز پوری لائبریری page load پر ship کرتے ہیں، جو ان کا اپنا Lighthouse اسکور گراتا ہے اور صفحہ user کے ٹائپ کرنے سے پہلے sluggish محسوس ہوتا ہے۔ یہ صفحہ Terser کو صرف اسی وقت lazy-load کرتا ہے جب آپ Minify کلک کریں یا Live mode آن کریں — اس لیے initial render Core Web Vitals thresholds سے نیچے رہتا ہے۔
• Core Web Vitals پاس کرنا. Lighthouse اور PageSpeed Insights بڑے JavaScript کو خراب Total Blocking Time کا براہ راست سبب قرار دیتے ہیں۔ Vendor libraries اور application bundles منی فائی کرنا Lighthouse "Reduce unused JavaScript" اور "Remove duplicate modules" آڈٹس میں سب سے تیز جیت ہے — عام طور پر دس یا بیس پوائنٹس کی یک بار کمی۔

عام استعمالات

JavaScript منی فائنگ جدید web project کے تقریباً ہر مرحلے پر ظاہر ہوتی ہے۔

• Pre-commit hooks: individual utility scripts کو repo میں commit کرنے سے پہلے منی فائی کریں تاکہ committed artifact پروڈکشن کے لیے تیار ہو اور diff سفید جگہ کی بجائے منطق کی تبدیلیاں دکھائے۔
• Third-party widget آڈٹس: vendor کا embed snippet پیسٹ کریں اور دیکھیں کہ آیا یہ پہلے سے minified ہے یا لاکھوں users کو serve کرنے سے پہلے مزید چھوٹا ہو سکتا ہے۔
• Legacy script صفائی: پرانے jQuery plugins اور ہاتھ سے لکھے scripts کو compress کریں جو آپ کے موجودہ build pipeline سے پہلے کے ہیں، source tree کو چھوئے بغیر۔

ایک عملی مثال

ایک چھوٹا function لیں: function add(firstNumber, secondNumber) { /* sums two numbers */ return firstNumber + secondNumber; } console.log(add(1, 2)); — تبصرے سمیت تقریباً 130 bytes۔ اسے Mangle اور Compress دونوں آن کر کے اوپر پیسٹ کریں۔ آؤٹ پٹ تقریباً function add(n,o){return n+o}console.log(add(1,2)); تک سمٹ جاتا ہے — تقریباً 55 bytes، 58 فیصد کمی۔ function نام add باقی رہتا ہے کیونکہ اسے console.log call میں استعمال کیا گیا ہے؛ parameter نام firstNumber اور secondNumber single letters میں چھوٹے ہو جاتے ہیں کیونکہ یہ function body میں local ہیں۔ readable parameter names رکھنے کے لیے Mangle بند کریں جبکہ سفید جگہ پھر بھی ہٹتی رہے اور تبصرہ گرتا رہے۔

FAQ

کیا یہ میرے براؤزر میں چلتا ہے؟

جی ہاں۔ Terser پہلی بار lazy-load ہوتا ہے جب آپ Minify کلک کریں یا Live mode فعال کریں — تقریباً 200 KB compressed آپ کے browser cache میں آتا ہے، پھر کچھ مزید download نہیں ہوتا۔ آپ کا code صفحہ کبھی نہیں چھوڑتا۔

name mangling کیا ہے اور کیا یہ محفوظ ہے؟

Mangling local variables کو bytes بچانے کے لیے single letters میں بدلتا ہے۔ یہ self-contained scripts اور IIFE bundles کے لیے محفوظ ہے کیونکہ نام scope سے باہر نہیں جاتے۔ یہ ان scripts کے لیے محفوظ نہیں ہے جو name کے ذریعے globals ظاہر کرتے ہیں (مثلاً window.myLib = …) بغیر wrapper کے۔ جب شک ہو Mangle بند کریں۔

منی فائنگ کے بعد میرا code کیوں ٹوٹا؟

تین عام وجوہات: eval یا with string کے ذریعے variables reference کرنا؛ Function.name یا arguments.callee reads جو اصل identifier پر منحصر ہیں؛ یا کوئی global کسی نام سے ظاہر ہو جو بدل گیا۔ پہلے Mangle بند کریں تاکہ معلوم ہو کہ renaming ذمہ دار ہے یا Compress transform۔

کیا یہ جدید syntax (ES2020+) سپورٹ کرتا ہے؟

جی ہاں۔ ECMAScript target کو ES2020 یا Next پر سیٹ کریں اور Terser optional chaining، nullish coalescing، top-level await اور logical-assignment operators محفوظ رکھتا ہے۔ ES5 پر سیٹ کریں اور Terser جہاں ممکن ہو down-compile کرتا ہے، لیکن یہ مکمل transpiler نہیں ہے — ایسے syntax کے لیے Babel استعمال کریں جو ES5 میں بالکل represent نہیں ہو سکتا۔

Browser-side JavaScript منی فائنگ Terser کے ساتھ پروڈکشن quality آؤٹ پٹ دیتا ہے بغیر build tool شامل کیے۔ script پیسٹ کریں، ECMAScript target چنیں، نتیجہ کاپی یا ڈاؤن لوڈ کریں۔ کوئی اپلوڈ نہیں، کوئی اکاؤنٹ نہیں، کوئی build pipeline نہیں۔ منی فائر خود صرف اسی وقت لوڈ ہوتا ہے جب آپ مانگیں — اس لیے یہ صفحہ کھولنے پر چند kilobytes خرچ ہوتے ہیں، megabyte نہیں۔