JavaScript मिनिफ़ायर — JavaScript को ऑनलाइन मिनिफ़ाई करें

फ़ॉर्मेटर या मिनिफ़ायर कोड में क्या बदलता है?

फ़ॉर्मेटर लेआउट बदलता है — व्हाइटस्पेस, लाइन ब्रेक और इंडेंटेशन — ताकि HTML, CSS या JavaScript एक जैसा पढ़ने में आए, और कुछ फ़ॉर्मेटर वे बारीकियाँ भी एक-सी कर देते हैं जिन्हें भाषा बराबर मानती है, जैसे HTML में टैग नाम का केस या एट्रिब्यूट के कोट; मिनिफ़ायर वह सब हटाता है जिसकी ब्राउज़र को ज़रूरत नहीं — कमेंट, व्हाइटस्पेस, वैकल्पिक सेमीकोलन — और वैल्यू को छोटे बराबर रूप में लिख सकता है, जैसे #ffffff की जगह #fff। दोनों का मक़सद कोड का व्यवहार बदलना नहीं है, फिर भी कमिट करने से पहले diff देखें: कोड का क्रम बदलने वाला विकल्प, जैसे CSS प्रॉपर्टी सॉर्ट करना, यह बदल सकता है कि कौन-सा declaration लागू हो, और छोटे अक्षरों में बदला गया टैग नाम <MyComponent> जैसे केस-संवेदी फ़्रेमवर्क कंपोनेंट को तोड़ देता है।

JavaScript मिनिफ़ायर कैसे इस्तेमाल करें

JavaScript पेस्ट करें।
तय करें कि license कमेंट (या सारे कमेंट) रखने हैं या नहीं।
मिनिफ़ाइड स्क्रिप्ट कॉपी या डाउनलोड करें।

JavaScript मिनिफ़ायर की खूबियाँ

कमेंट और सारा ग़ैर-ज़रूरी व्हाइटस्पेस हटाता है
automatic semicolon insertion के लिए ज़रूरी लाइन ब्रेक बनाए रखता है
/*! license */ और @license/@preserve कमेंट रखता है (वैकल्पिक)
स्ट्रिंग, template literal और regex literal कभी नहीं बदले जाते
न नाम बदलना, न कोड ट्रांसफ़ॉर्मेशन — आउटपुट डीबग करने योग्य रहता है
मूल साइज़, मिनिफ़ाइड साइज़ और बचत दिखाता है

JavaScript मिनिफ़ायर का उदाहरण

एक helper फ़ंक्शन को मिनिफ़ाई करना

इनपुट:

// add numbers
function add(a, b) {
  return a + b;
}

आउटपुट:

function add(a,b){return a+b;}

JavaScript मिनिफ़ायर के बारे में अक्सर पूछे जाने वाले सवाल

यह Terser या esbuild से कैसे अलग है?

यह टूल सिर्फ़ व्हाइटस्पेस और कमेंट हटाता है; यह वेरिएबल के नाम नहीं बदलता, कॉन्स्टेंट इनलाइन नहीं करता और डेड कोड नहीं हटाता। इससे आउटपुट stack trace में पढ़ने योग्य रहता है और झटपट कॉपी-पेस्ट के लिए सुरक्षित होता है।

क्या आउटपुट automatic semicolon insertion के साथ सुरक्षित है?

हाँ। जहाँ लाइन ब्रेक हटाने से अर्थ बदल सकता है वहाँ वह बनाए रखा जाता है (जैसे ( या [ से शुरू होने वाली लाइन या template literal से पहले), इसलिए ASI पर निर्भर कोड चलता रहता है।

क्या मैं license हेडर रख सकता हूँ?

/*! से शुरू होने वाले या @license / @preserve वाले कमेंट डिफ़ॉल्ट रूप से रखे जाते हैं। उन्हें भी हटाने के लिए इस विकल्प से टिक हटा दें।

कितनी बचत की उम्मीद करें?

हाथ से लिखे कोड पर आमतौर पर 20–40%, ज़्यादातर इंडेंटेशन और कमेंट से। आँकड़े पैनल में ठीक-ठीक बचे हुए byte दिखते हैं।

तकनीकी नोट्स

सुरक्षित मिनिफ़ायर सिर्फ़ वही हटाता है जिससे अर्थ न बदले। दो identifier कैरेक्टर के बीच का व्हाइटस्पेस एक स्पेस रह जाता है, "+ +" और "- -" क्रम अपना स्पेस बनाए रखते हैं, और एक्सप्रेशन के अंत तथा अगले एक्सप्रेशन की शुरुआत के बीच (जैसे "(" या "[" से पहले) newline बनी रहती है ताकि ASI नियम लागू होते रहें।

संदर्भ

HTML Living StandardWHATWGHTML भाषा, नामित कैरेक्टर रेफ़रेंस (एंटिटी) और ब्राउज़रों के पार्सिंग नियमों सहित।
ECMAScript® Language Specification (ECMA-262)Ecma International / TC39JavaScript भाषा का मानक, जिसमें RegExp का व्याकरण और अर्थ, JSON.parse/JSON.stringify और Date ऑब्जेक्ट शामिल हैं।