जावास्क्रिप्ट माइनिफायर - मुफ्त ऑनलाइन JS कोड ऑप्टिमाइज़र

व्हाइटस्पेस और टिप्पणियों को हटाकर कोड आकार कम करने के लिए मुफ्त जावास्क्रिप्ट माइनिफायर टूल। बिना किसी इंस्टॉलेशन के तुरंत JS फाइलों को ऑप्टिमाइज़ करें।

जावास्क्रिप्ट मिनीफायर

जावास्क्रिप्ट कोड

मिनीफाइड कोड

इस टूल के बारे में

यह सरल जावास्क्रिप्ट मिनीफायर अनावश्यक स्पेस और टिप्पणियों को हटाकर आपके कोड के आकार को कम करता है। यह कार्यक्षमता को बरकरार रखते हुए आपके कोड को अधिक संक्षिप्त बनाता है।

अनावश्यक व्हाइटस्पेस (स्पेस, टैब, नई पंक्तियां) हटाता है
टिप्पणियां (एकल-पंक्ति और बहु-पंक्ति) हटाता है
स्ट्रिंग लिटरल्स और नियमित अभिव्यक्तियों को संरक्षित करता है
कोड की कार्यक्षमता बनाए रखता है

लोडिंग कैलकुलेटर...

📚

दस्तावेज़ीकरण

JavaScript मिनिफ़ायर क्या है?

JavaScript मिनिफ़ायर एक ऐसा उपकरण है जो ब्राउज़र द्वारा चलाने के लिए आवश्यक न होने वाले वर्णों, जैसे अतिरिक्त रिक्त स्थान, पंक्ति-विराम और टिप्पणियों को हटाकर JavaScript स्रोत कोड को छोटा करता है। मिनिफ़िकेशन के बाद भी कोड बिल्कुल वही काम करता है। केवल फ़ाइल का आकार बदलता है।

छोटी JavaScript फ़ाइलें तेज़ी से डाउनलोड और लोड होती हैं, इसलिए वेबसाइट को लाइव करने से पहले मिनिफ़िकेशन करना एक आम चरण है।

JavaScript मिनिफ़िकेशन कैसे काम करता है

यह उपकरण कोड को एक बार में एक वर्ण पढ़कर फिर से बनाता है और वह सब हटा देता है जिसकी पाठकों को आवश्यकता होती है, लेकिन JavaScript इंजन को नहीं। यह हटाता है:

टिप्पणियाँ—// single-line टिप्पणियाँ और /* multi-line */ टिप्पणियाँ, दोनों ही, जिनमें JSDoc-शैली की टिप्पणियाँ भी शामिल हैं।
अतिरिक्त रिक्त स्थान, टैब और खाली पंक्तियाँ, जो केवल कोड को पढ़ना आसान बनाने के लिए होती हैं।

यह इनके अलावा कुछ भी नहीं जोड़ता या हटाता। यह कभी भी कोड में पहले से मौजूद अर्धविराम, कोष्ठक या किसी अन्य वर्ण को नहीं हटाता और न ही नया विराम-चिह्न डालता है। यह कई चीज़ों को बिना बदले भी छोड़ देता है:

स्ट्रिंग के अंदर का पाठ ("like this", 'like this') और टेम्पलेट लिटरल (`like this`), भले ही उस पाठ में रिक्त स्थान हों या वह टिप्पणी जैसा दिखता हो।
रेगुलर एक्सप्रेशन लिटरल, जैसे /[a-z]+/g, और उनके सभी फ़्लैग: d, g, i, m, s, u, v और y।
हर वह अर्धविराम, अल्पविराम और कोष्ठक, जो मूल कोड में पहले से मौजूद था।

कभी-कभी दो टोकनों के बीच का रिक्त स्थान हटाने से उनका अर्थ बदल सकता है। return a को returna नहीं बनाया जा सकता, क्योंकि वह एक ही शब्द के रूप में पढ़ा जाएगा। यही बात अंग्रेज़ी वर्णमाला से बाहर के अक्षरों से लिखे नामों पर भी लागू होती है, इसलिए typeof π में उसका रिक्त स्थान बना रहता है। जब रिक्त स्थान हटाने से दो टोकन आपस में जुड़ जाएँ, तो उपकरण उसकी जगह एक रिक्त स्थान बनाए रखता है।

पंक्ति-विराम भी कभी-कभी महत्वपूर्ण होता है। JavaScript कभी-कभी पंक्ति के अंत में अर्धविराम अपने-आप डालता है; इस नियम को Automatic Semicolon Insertion कहा जाता है। यदि पंक्ति-विराम हटाने से यह नियम सक्रिय या निष्क्रिय हो सकता हो, या यदि पंक्ति-विराम समापन ब्रेस } के बाद आता हो, तो उपकरण वहाँ एक पंक्ति-विराम बनाए रखता है। इसी कारण मिनिफ़ाइड कोड हमेशा एक ही पंक्ति में नहीं समेटा जाता: कुछ पंक्ति-विराम कोड का अर्थ बदल सकते हैं और उन्हें रखना आवश्यक होता है।

इस JavaScript मिनिफ़ायर का उपयोग कैसे करें

इनपुट बॉक्स में JavaScript कोड चिपकाएँ।
"Minify" चुनें।
आउटपुट बॉक्स में परिणाम, मूल आकार, मिनिफ़ाइड आकार और प्रतिशत कमी देखें।
मिनिफ़ाइड कोड की प्रति बनाने के लिए "Copy" चुनें।

मिनिफ़िकेशन ब्राउज़र टैब के अंदर चलता है, इसलिए कोड को संसाधित करने के लिए कहीं अपलोड नहीं किया जाता। यह उपकरण चिपकाए गए कोड को पृष्ठ के पते में भी कॉपी करता है, जिससे परिणाम को बुकमार्क करना या साझा करना आसान हो जाता है। इसलिए वह पता देख सकने वाला कोई भी व्यक्ति कोड देख सकता है।

उदाहरण: किसी फ़ंक्शन को मिनिफ़ाई करना

पहले:

1// Calculate the sum of two numbers
2function addNumbers(a, b) {
3    // Return the sum
4    return a + b;
5}
6
7// Call the function with 5 and 10
8const result = addNumbers(5, 10);
9console.log("The sum is: " + result);
10

बाद में:

1function addNumbers(a,b){return a+b;}
2const result=addNumbers(5,10);console.log("The sum is: "+result);
3

तीनों टिप्पणियाँ गायब हो जाती हैं और इंडेंटेशन भी हट जाता है। a+b के बाद का अर्धविराम बना रहता है, क्योंकि उपकरण पहले से मौजूद अर्धविराम को कभी नहीं हटाता। const से पहले का पंक्ति-विराम भी बना रहता है, क्योंकि वह समापन } के बाद आता है।

उदाहरण: किसी क्लास को मिनिफ़ाई करना

पहले:

1/**
2 * A simple counter class
3 * that increments and decrements a value
4 */
5class Counter {
6    constructor(initialValue = 0) {
7        this.count = initialValue;
8    }
9
10    increment() {
11        return ++this.count;
12    }
13
14    decrement() {
15        return --this.count;
16    }
17
18    getValue() {
19        return this.count;
20    }
21}
22
23// Create a new counter
24const myCounter = new Counter(10);
25console.log(myCounter.increment()); // 11
26console.log(myCounter.increment()); // 12
27console.log(myCounter.decrement()); // 11
28

बाद में:

1class Counter{constructor(initialValue=0){this.count=initialValue;}
2increment(){return++this.count;}
3decrement(){return--this.count;}
4getValue(){return this.count;}
5}
6const myCounter=new Counter(10);console.log(myCounter.increment());console.log(myCounter.increment());console.log(myCounter.decrement());
7

ध्यान दें कि हर मेथड से पहले और क्लास के समापन } से पहले एक पंक्ति-विराम बना रहता है। मूल कोड में इनमें से हर पंक्ति-विराम समापन } के बाद आता है, इसलिए Automatic Semicolon Insertion की रक्षा करने वाला नियम उन्हें बनाए रखता है। हर मेथड के अंदर के अर्धविराम भी बने रहते हैं।

आकार में कमी का सूत्र

उपकरण आउटपुट बॉक्स के नीचे तीन संख्याएँ दिखाता है: मूल आकार, मिनिफ़ाइड आकार और कमी। सभी आकार बाइट नहीं, बल्कि वर्णों की संख्या हैं। कमी निकटतम पूर्ण संख्या तक पूर्णांकित प्रतिशत के रूप में दी जाती है:

1reduction = round((1 - minified characters / original characters) x 100)
2

ऊपर दिए गए फ़ंक्शन उदाहरण में मिनिफ़िकेशन से पहले 213 वर्ण और बाद में 103 वर्ण हैं। इसलिए 1–103 / 213 = 0.5164, जो 51.64% है, और उपकरण 52% दिखाता है। क्लास उदाहरण 515 वर्णों से घटकर 304 रह जाता है, जो 40.97% है और 41% के रूप में दिखाया जाता है।

इस मिनिफ़ायर की सीमाएँ

यह उपकरण केवल टिप्पणियाँ और रिक्त स्थान हटाता है। Terser या UglifyJS जैसे बिल्ड-चरण उपकरणों के विपरीत, यह चर का नाम नहीं बदलता, अप्रयुक्त कोड नहीं हटाता और फ़ाइलों को संयोजित नहीं करता। ऐसे उपकरण आम तौर पर छोटा आउटपुट बनाते हैं, लेकिन उन्हें चलाने के लिए बिल्ड प्रक्रिया आवश्यक होती है। यह उपकरण बिना किसी सेटअप के ब्राउज़र में तुरंत काम करता है, इसलिए पूरी प्रोडक्शन पाइपलाइन की बजाय त्वरित जाँच या छोटे कोड अंशों के लिए उपयुक्त है।

अक्सर पूछे जाने वाले प्रश्न

JavaScript मिनिफ़ायर क्या हटाता है?

यह उन टिप्पणियों और रिक्त स्थानों को हटाता है जिनकी कोड चलाने के लिए आवश्यकता नहीं होती। यह अर्धविराम, कोष्ठक या कोड का पहले से हिस्सा रहे किसी अन्य वर्ण को नहीं हटाता।

क्या JavaScript को मिनिफ़ाई करने से उसके चलने का तरीका बदलता है?

नहीं। मिनिफ़ाइड कोड को मूल कोड के समान परिणाम देने चाहिए। केवल फ़ॉर्मैटिंग बदलती है।

मिनिफ़ाइड कोड में कभी-कभी पंक्ति-विराम क्यों बने रहते हैं?

JavaScript के Automatic Semicolon Insertion नियम के कारण पंक्ति-विराम आवश्यक हो सकता है, या वह समापन ब्रेस } के बाद आ सकता है। उसे हटाने से कोड का कार्य बदल सकता है, इसलिए उपकरण उन स्थानों पर उसे हटाने के बजाय एक पंक्ति-विराम बनाए रखता है।

क्या मिनिफ़िकेशन और संपीड़न एक ही चीज़ हैं?

नहीं। मिनिफ़िकेशन स्रोत कोड से ही वर्ण हटाता है। gzip या Brotli जैसा संपीड़न नेटवर्क पर स्थानांतरण के लिए फ़ाइल को अलग तरीके से एन्कोड करता है। वेबसाइटें आम तौर पर दोनों का साथ में उपयोग करती हैं।

क्या मेरा कोड किसी सर्वर पर भेजा जाता है?

मिनिफ़ायर स्वयं पूरी तरह ब्राउज़र टैब में चलता है और कोड को मिनिफ़ाई करने के लिए अपलोड नहीं किया जाता। चिपकाया गया कोड पृष्ठ के पते में संग्रहीत होता है, ताकि परिणाम साझा या बुकमार्क किया जा सके; इसलिए वह ब्राउज़र के पता बार और इतिहास में दिखाई देता है।

क्या मिनिफ़ाइड कोड को मूल रूप में वापस बदला जा सकता है?

कोड फ़ॉर्मैटर द्वारा रिक्त स्थान फिर से जोड़े जा सकते हैं, लेकिन टिप्पणियाँ और मूल चर तथा फ़ंक्शन के नाम समाप्त हो जाते हैं, जब तक कि अलग सोर्स मैप सुरक्षित न किया गया हो।

संदर्भ

MDN Web Docs. "Minification." MDN शब्दावली, https://developer.mozilla.org/en-US/docs/Glossary/Minification
ECMA International. "ECMAScript Language Specification," अनुभाग 12.10, "Automatic Semicolon Insertion." https://tc39.es/ecma262/#sec-automatic-semicolon-insertion
ECMA International. "ECMAScript Language Specification," अनुभाग 12.7.1, "Identifier Names." https://tc39.es/ecma262/#sec-names-and-keywords
ECMA International. "ECMAScript Language Specification," अनुभाग 22.2.6, "Properties of the RegExp Prototype Object" (फ़्लैग सेट d g i m s u v y)। https://tc39.es/ecma262/#sec-properties-of-the-regexp-prototype-object