जावास्क्रिप्ट को कम करने के लिए 14 उपकरण

जावास्क्रिप्ट मिनिफिकेशन एक तकनीक है जो आपकी स्क्रिप्ट को बहुत छोटे पदचिह्न में सम्मिलित करता है. आप मानवीय पठनीयता खो देते हैं लेकिन आप काफी बैंडविड्थ का संरक्षण करते हैं - अंत में, आपके ब्राउज़र के लिए जावास्क्रिप्ट आपके उपयोगकर्ताओं के लिए नहीं है.

अधिकांश उत्पादन वेबसाइटें जावास्क्रिप्ट मिनिफिकेशन का उपयोग करती हैं लेकिन इसे प्राप्त करने का तरीका बहुत भिन्न होता है। सरल ऑनलाइन कन्वर्टर्स से लेकर अधिक व्यापक GUI टूल से कमांड लाइन इंटरफेस तक, हमारे विकल्प बहुत विविध हैं। इस लेख में हम देखेंगे जावास्क्रिप्ट मिनिफिकेशन कैसे काम करता है, हम इसे अपने वर्कफ़्लो में कैसे बना सकते हैं और मिनिमाइजिंग के पेशेवरों और विपक्ष क्या हैं.

कैसे काम करता है खनन

जब आप अपने कोड को छोटा करते हैं, तो यह जानने का सबसे अच्छा तरीका है कि आप UglifyJS Github Repository पर एक नज़र डालें। इस स्क्रिप्ट का उपयोग कई ऑनलाइन कन्वर्टर्स के साथ-साथ GUI टूल्स और कमांड लाइन टूल्स जैसे ग्रंट में किया जाता है। यहां कुछ परिवर्तन दिए गए हैं जो आपके कोड को छोटा बनाने के लिए लागू होते हैं:

अनावश्यक स्थान को हटाता है
लघु नाम, आमतौर पर एकल वर्णों के लिए
लगातार var घोषणाओं में शामिल होता है
जहाँ संभव हो वस्तुओं को सरणियाँ देता है
बयानों का अनुकूलन करता है
सरल स्थिर भावों की गणना करता है
आदि.

एक त्वरित उदाहरण के रूप में, यहां एक फ़ंक्शन है जो अनिवार्य रूप से कुछ दिए गए पाठ को लिखता है.

 समारोह हैलो (पाठ) document.write (पाठ);

हैलो ('लेख में आपका स्वागत है');

आइए देखें कि जब हम इसे छोटा करते हैं तो क्या होता है। रिक्त स्थान और इंडेंटेशन को हटाने और पाठ चर को छोटा करने पर ध्यान दें.

फ़ंक्शन हैलो (e) document.write (e) हैलो ("लेख में आपका स्वागत है")

जावास्क्रिप्ट न्यूनतम उपकरण

जावास्क्रिप्ट को छोटा करने के लिए उपयोग किए जाने वाले उपकरणों को मोटे तौर पर 3 समूहों में वर्गीकृत किया जा सकता है: ऑनलाइन उपकरण, जीयूआई उपकरण और कमांड लाइन टूल.

ऑनलाइन टूल के साथ यह आमतौर पर आपके कोड को चिपकाने और परिणाम को तुरंत कॉपी करने का मामला है.
जीयूआई उपकरण में अक्सर बहुत अधिक कार्यक्षमता होती है; जेएस मिनिफिकेशन केवल वे क्या करते हैं का एक छोटा सा हिस्सा है.
कमांड लाइन उपकरण भी आमतौर पर अधिक व्यापक होते हैं, एक मॉड्यूल के रूप में पेशीकरण की पेशकश करते हैं.

ऑनलाइन उपकरण

javascript-minifier.com एक एपीआई के साथ अच्छा दिखने वाला उपकरण है
ऑनलाइन YUI कंप्रेसर एक अधिक शक्तिशाली उपकरण है जो YUI कंप्रेसर का उपयोग करता है, साथ ही बहुत सारे विकल्प और सीएसएस न्यूनतम क्षमता भी
jscompress.com एक नो-फ्रिल्स मिनिफायर है, लेकिन यह काम पूरा कर देता है
jsmini.com एक और सरल लेकिन पूरी तरह से प्रयोग करने योग्य विकल्प है

ऑनलाइन टूल के बारे में महान बात वह गति है जिसके साथ आप उनके साथ काम कर सकते हैं। कॉम्प्लेक्स GUI और कमांड लाइन टूल त्वरित रूप से छोटा हो जाता है, लेकिन आपको ठीक से काम करने के लिए एक प्रोजेक्ट स्थापित करना होगा। इन उपकरणों के लिए नकारात्मक पक्ष यह है कि वे ज्यादातर कोई अनुकूलन करने के लिए थोड़ा प्रदान करते हैं, कम से कम जब कमांड लाइन टूल की तुलना में.

जीयूआई उपकरण

कोआला लेस, एसएएस संकलन, जेएस मिनिफिकेशन और बहुत अधिक के लिए एक नि: शुल्क उपकरण है
Prepros एक क्रॉस-प्लेटफ़ॉर्म सशुल्क ऐप है जो आपको और भी अधिक विकल्प देता है
कोडकिट मेरी पसंद का ऐप है। यह एक सशुल्क मैक-ओनली ऐप है जो कोड संकलन, न्यूनतमकरण, एक पूर्वावलोकन सर्वर, बोवर पैकेज प्रबंधन और बहुत कुछ प्रदान करता है
AjaxminGui आपके जेएस को छोटा करने के लिए एक मुफ्त, एकल-उद्देश्य वाला विंडोज टूल है
UltraMinifier OS X के लिए एक मुफ्त ऐप है जो सीएसएस और जेएस को ड्रैग एंड ड्रॉप के साथ छोटा करता है
छोटा एक ओएस एक्स उपकरण है जो आपके लिए फ़ाइलों को छोटा और संक्षिप्त करता है

मैंने यहाँ दो प्रकार के GUI ऐप्स का उल्लेख किया है। सरल वन-स्टेप मिनिफिकेशन ऐप उनके ऑनलाइन समकक्षों की तरह हैं। वे उपयोग करने के लिए बहुत जल्दी हैं क्योंकि आप बस उन में फ़ाइलों को खींच सकते हैं और छोड़ सकते हैं, कोई सेटअप की आवश्यकता नहीं है। उन्होंने कहा, वे वस्तुतः कोई अनुकूलन प्रदान करते हैं.

बड़े GUI उपकरण (Prepros, Koala, Codekit) परियोजनाओं के प्रबंधन में बहुत अच्छे हैं और आपको इन विकल्पों के लिए कुछ और विकल्प दे रहे हैं लेकिन ऐसा नहीं करते हैं सेटअप की थोड़ी जरूरत है. ऑनलाइन या सरल जीयूआई टूल की 2 सेकंड की प्रक्रिया की तुलना में एक त्वरित जेएस मिनिफिकेशन में लगभग 20 सेकंड का समय लगेगा.

दूसरी ओर, वे आपको सामान्य रूप से अधिक सुविधाएँ प्रदान करते हैं और आपको स्वचालन प्रदान करते हैं। आपकी जेएस फाइलें हर बार जब आप उन्हें सहेजते हैं, तो उन्हें छोटा करने की कोई जरूरत नहीं होगी। यदि आप जावास्क्रिप्ट में कुछ विकसित कर रहे हैं तो यह निश्चित रूप से जाने का रास्ता है.

कमांड लाइन उपकरण

Minify उन लोगों के लिए है जो कमांड लाइन से JS को छोटा करना चाहते हैं लेकिन Grunt या Gulp में कुछ भी फैंसी सेट नहीं करना चाहते हैं
Uglify.js जिसका हमने पहले उल्लेख किया है, वह स्टैंड-अलोन कमांड लाइन टूल के रूप में भी उपलब्ध है
ग्रंट में जावास्क्रिप्ट-मिनिबिफिकेशन के लिए एक एक्सटेंशन है जिसका नाम ग्रंट-कॉर्बिन-क्रुलाइज़ है
गुलप में भी जेएस मिनिफिकेशन का उपयोग करके Uglify.js का उपयोग करके gulp-uglify के माध्यम से किया जाता है

कमांड लाइन उपकरण सिर्फ लिनक्स गीक्स के लिए नहीं हैं! मैं टर्मिनल में महान नहीं हूं, लेकिन ग्रंट और गुल्प जैसी चीजों को स्थापित करना उनके महान प्रलेखन के माध्यम से आसान है। कमांड लाइन टूल का उल्टा आपके पास विकल्पों में से आउटपुट के लिए लचीलेपन की भयानक मात्रा है.

दूसरी ओर, एक है थोड़ा सीखने की अवस्था. कमांड लाइन के लिए उपयोग किया जा रहा है कुछ (बहुत अधिक नहीं) अभ्यास लेता है जो आपको प्रतिबंधात्मक लगेगा इससे पहले कि आप लाभों का आनंद लेना शुरू करें.

अवलोकन

यदि आप वेब विकास में नए हैं, तो मैं पहले तीन जीयूआई उपकरणों में से एक की सिफारिश करूंगा। वे आपको अपनी परियोजनाओं को सामान्य रूप से प्रबंधित करने में मदद करेंगे और सिर्फ जेएस मिनिफ़िकेशन की तुलना में अधिक प्रदान करेंगे.

यदि आप एक अनुभवी समर्थक हैं तो आपको संभवतः देखना चाहिए चना या गूदा चूंकि ये स्वचालन कार्यों पर सबसे अधिक नियंत्रण प्रदान करते हैं। यदि आपको किसी स्क्रिप्ट को जल्दी से छोटा करने की आवश्यकता है एक परियोजना की स्थापना के बिना, कमांड लाइन टूल आपको बहुत समय बचा सकता है.

औजारों के प्रत्येक समूह के पास अपने पेशेवरों और विपक्ष हैं और सच में आप शायद किसी न किसी बिंदु पर किसी एक का उपयोग करके समाप्त हो जाएंगे। ध्यान रखें कि जब उत्पादन के माहौल में आपको हमेशा अपने जावास्क्रिप्ट और सीएसएस को छोटा करना चाहिए!