JavaScript मिनिफ़ाई करें
उसी तरह का मिनिफ़ायर जो बिल्ड टूल इस्तेमाल करते हैं, इसी पेज के अंदर चलता हुआ। नई सिंटैक्स और मॉड्यूल समझे जाते हैं, और आपका सोर्स कभी स्टोर नहीं होता।
- कभी स्टोर नहीं होती
- न कतार, न इंतज़ार
- साइनअप नहीं, वॉटरमार्क नहीं
मिनिफ़ाई किया हुआ JavaScript यहां दिखेगा।
यह कैसे काम करता है
अपना JavaScript पेस्ट करें
या फ़ाइल यहां छोड़ें। मॉड्यूल, class और नई सिंटैक्स, सब समझे जाते हैं।
विकल्प चुनें
लोकल वेरिएबल के नाम बदलना, console कॉल हटाना, लाइसेंस कमेंट रखना — हर एक का अपना स्विच है।
कॉपी या डाउनलोड करें
पहले और बाद के साइज़ के साथ।
नाम बदलना, हटाना, और वह जिसे कभी छुआ नहीं जाना चाहिए
तीन चीज़ें होती हैं, इस क्रम में कि वे कितना बचाती हैं और आपको कितनी महंगी पड़ती हैं। ख़ाली जगह और कमेंट हटते हैं, जिसकी कोई क़ीमत नहीं। Dead code हटता है — ऐसी ब्रांच जो कभी चल ही नहीं सकती, ऐसा वेरिएबल जिसे वैल्यू दी गई पर कभी पढ़ा नहीं गया। और लोकल नाम छोटे किए जाते हैं, यानी सोच-समझकर रखा गया calculateMonthlyTotal एक अक्षर बन जाता है। ज़्यादातर बचत इसी आख़िरी क़दम से होती है, और यही आउटपुट को पढ़ने लायक नहीं रहने देता — भेजने के लिए ठीक, डिबग करने के लिए बेकार।
जिस चीज़ को बाहरी दुनिया नाम से पुकारती है, उसका नाम बदला नहीं जा सकता, और इसमें ग़लती ही वह तरीक़ा है जिससे मिनिफ़ायर कोड तोड़ते हैं। Export किए गए फ़ंक्शन, string के रूप में पढ़ी जाने वाली object property, window से पहुंची जाने वाली कोई भी चीज़, और eval में इस्तेमाल होने वाले नाम — सब ज्यों के त्यों बचने चाहिए, क्योंकि कहीं और कुछ उन्हें आपके लिखे नाम से ही ढूंढ रहा है। Property ख़ास तौर पर डिफ़ॉल्ट रूप से छोड़ दी जाती हैं: user.emailAddress का नाम बदलना उसी पल टूट जाता जब वह object JSON में बदला जाए या उसे ऐसा कोड पढ़े जो अलग से मिनिफ़ाई हुआ हो।
Source map या मूल फ़ाइल संभालकर रखें। नाम हट जाने के बाद किसी असली यूज़र का stack trace कुछ ऐसा दिखता है: फ़ंक्शन t में, कैरेक्टर 48,213 पर एरर — जिससे कुछ पता नहीं चलता। Source map डिबगर और एरर रिपोर्टिंग में मूल नाम और लाइन नंबर लौटा देता है, और इसे बनाने की कोई क़ीमत नहीं, क्योंकि यह एक अलग फ़ाइल के रूप में जाता है जो तभी लोड होती है जब कोई developer tools खोलता है।
लाइसेंस कमेंट डिफ़ॉल्ट रूप से रखे जाते हैं, और यह पसंद का नहीं, क़ानूनी मामला है। बहुत-सा open-source कोड इस एक शर्त पर खुली छूट के साथ मिलता है कि उसकी copyright notice उसके साथ रहे — MIT और BSD दोनों यह साफ़ कहते हैं। तीसरे पक्ष के कोड वाले bundle से वे कमेंट हटाना उसी लाइसेंस का उल्लंघन है जिसने आपको उसे इस्तेमाल करने दिया। वे बस कुछ सौ बाइट होते हैं।
जब आपको कुछ और चाहिए
यह काम ब्राउज़र टैब में नहीं, बिल्ड में होना चाहिए, और आज के bundler इसे अपने-आप करते हैं। esbuild --minify और Rollup या Vite बिल्ड के समय मिनिफ़ाई करते हैं, source map अपने-आप बनाते हैं, और — इससे कहीं ज़्यादा अहम — tree shaking करते हैं, यानी आपकी dependencies के वे export हटा देते हैं जिन्हें आप कभी import नहीं करते। किसी असली ऐप्लिकेशन में इससे इतनी बचत होती है जितनी तैयार फ़ाइल को मिनिफ़ाई करने से कभी नहीं हो सकती।
ऑप्टिमाइज़ करने से पहले मापें। Bundle analyser आम तौर पर दिखा देगा कि फ़ाइल का ज़्यादातर हिस्सा एक बड़ी dependency का है — कोई date library, कोई icon set, सिर्फ़ एक चार्ट के लिए पूरा का पूरा खींचा गया charting package। उसे बदलना या lazy load करना किसी भी मिनिफ़िकेशन से बेहतर है, और code splitting, ताकि पेज सिर्फ़ वही लोड करे जो उसे चाहिए, दोनों से बेहतर।
अक्सर पूछे जाने वाले सवाल
क्या मेरा कोड कहीं स्टोर होता है?
नहीं, और सोर्स कोड के लिए यही सबसे अहम बात है। कुछ भी स्टोर नहीं किया जाता और कोई सर्वर उसे कभी नहीं देखता। अपना निजी सोर्स किसी ऐसे ऑनलाइन मिनिफ़ायर में पेस्ट करना जो उसे कहीं भेज देता है, उसे उजागर करना ही है, चाहे साइट डेटा रखने के बारे में कुछ भी कहे — और यह ठीक वैसा काम है जो जल्दबाज़ी में बिना सोचे कर दिया जाता है।
क्या यह मेरे बिल्ड टूल वाले मिनिफ़ायर जैसा ही है?
लगभग पक्का, हां। यह उसी तरह का मिनिफ़ायर है जो webpack, Rollup, Vite और ज़्यादातर दूसरे bundler इस्तेमाल करते हैं। फ़र्क़ बस इतना है कि यह इंस्टॉल करने वाली चीज़ की बजाय यहीं चलता है।
क्या इससे मेरे कोड का काम बदल जाएगा?
नहीं बदलना चाहिए, और यह मानकर नहीं छोड़ा जाता बल्कि जांचा जाता है: हमारे टेस्ट एक मॉड्यूल को मिनिफ़ाई करते हैं, मूल और मिनिफ़ाई किए गए दोनों वर्शन import करके चलाते हैं, और नतीजों की तुलना करते हैं। जो ज़रूर बदलता है: लोकल वेरिएबल के नाम (जब तक आप इसे बंद न करें), ऐसे constant expression जिनका हिसाब पहले से लगाया जा सके, और dead code। जो कुछ भी रनटाइम पर किसी फ़ंक्शन के नाम पर, या Function.prototype.toString पर निर्भर है, वह नाम बदलने से टूट सकता है — अगर आप इनमें से किसी पर निर्भर हैं तो नाम बदलना बंद कर दें।
“मॉड्यूल के रूप में पार्स करें” का क्या मतलब है?
यह कि आपका कोड ES module के रूप में पार्स हो या सादी script के रूप में। मॉड्यूल import और export इस्तेमाल कर सकते हैं और हमेशा strict mode में होते हैं। यह डिफ़ॉल्ट रूप से चालू है, क्योंकि ज़्यादातर आधुनिक कोड ऐसा ही होता है; अगर आपकी फ़ाइल पुराने ढंग की script है जो "with" इस्तेमाल करती है या non-strict व्यवहार पर निर्भर है, तो इसे बंद कर दें।
क्या मुझे console कॉल हटाने चाहिए?
प्रोडक्शन के लिए आम तौर पर हां — वे बेकार का शोर हैं, और developer tools खोलने वाले किसी को भी अंदरूनी जानकारी दिखा सकते हैं। यह डिफ़ॉल्ट रूप से बंद है, क्योंकि चुपचाप कोड मिटाना ऐसा काम नहीं जो कोई टूल बिना कहे करे।
क्या यह लाइसेंस कमेंट रखता है?
हां, डिफ़ॉल्ट रूप से। /*! से शुरू होने वाले कमेंट और @license या @preserve वाले कमेंट रखे जाते हैं, क्योंकि किसी और की MIT-लाइसेंस वाली library से उन्हें हटाना लाइसेंस का उल्लंघन है। सामान्य कमेंट हटा दिए जाते हैं।
क्या यह source map बना सकता है?
इस पेज पर नहीं। Source map तभी काम का है जब वह किसी तय URL पर मूल फ़ाइल के साथ हो, जो पेस्ट-और-कॉपी वाले टूल में फ़िट नहीं बैठता — उसके लिए सही जगह आपका बिल्ड टूल है।
क्या कोई साइज़ लिमिट है?
कोई तय लिमिट नहीं। कुछ हज़ार लाइनें एक सेकंड से काफ़ी कम में मिनिफ़ाई हो जाती हैं; बहुत बड़ी bundled फ़ाइल में ज़्यादा समय लगता है, क्योंकि कुछ भी रीनेम होने से पहले पूरी फ़ाइल पार्स होती है। अगर आप पूरा प्रोडक्शन bundle मिनिफ़ाई कर रहे हैं, तो उसके लिए आपका बिल्ड टूल बेहतर जगह है — यह पेज एक फ़ाइल या झटपट जांच के लिए है।
ध्यान दें: लोकल वेरिएबल के नाम बदलने से फ़ाइल छोटी होती है और आउटपुट पढ़ने लायक नहीं रहता — भेजने के लिए यह ठीक है, डिबग करने के लिए बेकार; source map या मूल फ़ाइल संभालकर रखें। लाइसेंस कमेंट डिफ़ॉल्ट रूप से रखे जाते हैं, क्योंकि उन्हें हटाने से उस कोड के लाइसेंस का उल्लंघन हो सकता है जिसे इस्तेमाल करने की आपको इजाज़त मिली है।
यह टूल अपनी वेबसाइट पर लगाएं
किसी भी ब्लॉग, क्लास पेज या हेल्प आर्टिकल के लिए मुफ़्त। एक स्निपेट पेस्ट करें और आपके विज़िटर इसे सीधे आपके पेज पर इस्तेमाल कर सकेंगे।
मिलते-जुलते टूल्स
CSS मिनिफ़ाई करें
स्टाइलशीट छोटी करें, या जानें कि क्यों नहीं हो सकती
HTML मिनिफ़ाई करें
पेज बिगाड़े बिना HTML छोटा करें
JSON फ़ॉर्मैटर
उलझे JSON को पढ़ने लायक बनाएं
Base64 एन्कोड करें
टेक्स्ट या फ़ाइल को Base64 में बदलें
डुप्लिकेट लाइनें हटाएं
दोहराव हटाएं, सूची को सॉर्ट करें और साफ़ करें
केस कन्वर्टर
UPPER, lower, Title Case, camelCase और बाक़ी सब