जावास्क्रिप्ट कंप्रेसर: अपने जेएस को कैसे और क्यों छोटा करें?

हम सब वहाँ रहे हैं, आपने सीखा एक शानदार वेबसाइट कैसे बनाएं , लेकिन एक बार जब आप इसे प्रकाशित कर देते हैं, तो यह असहनीय रूप से धीमा होता है।

अपने जावास्क्रिप्ट को छोटा करना वेबसाइट प्रतिक्रिया समय को तेज करने का एक तरीका है (साथ में एचटीएमएल को संपीड़ित करना ), और सौभाग्य से आपके लिए, यह एक आसान प्रक्रिया है। आज मैं आपको वह सब कुछ दिखाऊंगा जो आपको जानना आवश्यक है।

छोटा करने का क्या मतलब है?

की प्रक्रिया छोटा करना (या को कम करने ) एक सरल अवधारणा है। जब आप जावास्क्रिप्ट या किसी अन्य भाषा में कोड लिखते हैं, तो ऐसी कई विशेषताएं होती हैं, जो केवल मनुष्यों के लिए कोड को समझने में आसान बनाने के लिए आवश्यक होती हैं - कंप्यूटर इस बात की परवाह नहीं करते हैं कि आप अपने चर को क्या कहते हैं, या कोष्ठक के आसपास कितनी दूरी है, उदाहरण के लिए।

कोड को छोटा करके, आप इसके फ़ाइल आकार को काफी कम कर सकते हैं। इसलिए आपके उपयोगकर्ताओं को डाउनलोड करने के लिए एक छोटी फ़ाइल जल्दी होगी। यदि आप जावास्क्रिप्ट की केवल एक या दो पंक्तियाँ लिख रहे हैं, तो संभवतः कोई उल्लेखनीय सुधार नहीं होगा। हालांकि, यदि आप बहुत सारे कोड लिख रहे हैं, या jQuery जैसे बड़े पुस्तकालयों का उपयोग कर रहे हैं, तो ध्यान देने योग्य प्रदर्शन बढ़ता है और फ़ाइल आकार में भारी कमी आसानी से प्राप्त की जा सकती है!

यदि आप किसी बाहरी सीडीएन से कोड लोड करते हैं, जैसे कि Google द्वारा होस्ट की गई लाइब्रेरी , आपने मिनिफाइड कोड का उपयोग किया है।

फोटोशॉप में इमेज की डीपीआई कैसे बढ़ाएं

मिनिफाइड कोड कैसा दिखता है?

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

यहाँ कुछ है असिंचित हमारे गाइड से जावास्क्रिप्ट पायथन और जावास्क्रिप्ट के साथ JSON का उपयोग करने के लिए:

// setup some JSON to use  
var cars = [  
 { 'make':'Porsche', 'model':'911S' },  
 { 'make':'Mercedes-Benz', 'model':'220SE' },  
 { 'make':'Jaguar','model': 'Mark VII' }  
];  
window.onload = function() {  
 // setup the button click  
 document.getElementById('theButton').onclick = function() {  
 doWork()  
 };  
}  
function doWork() {  
 // ajax the JSON to the server  
 $.post('receiver', cars, function(){  
 });  
 // stop link reloading the page  
 event.preventDefault();  
}

यहाँ छोटा कोड है:

function doWork(){$.post('receiver',cars,function(){}),event.preventDefault()}var cars=[{make:'Porsche',model:'911S'},{make:'Mercedes-Benz',model:'220SE'},{make:'Jaguar',model:'Mark VII'}];window.onload=function(){document.getElementById('theButton').onclick=function(){doWork()}};

कोड का यह छोटा संस्करण है 39 प्रतिशत छोटा। इस उदाहरण में, चर नाम वही रहते हैं, लेकिन सभी रिक्त स्थान और टिप्पणियां हटा दी गई हैं।

हमारे गाइड से jQuery के लिए एक और उदाहरण यहां दिया गया है:

// dfd == deferred  
var dfd = $.Deferred();  
function doThing() {  
 $.get('some/slow/url', function() {  
 dfd.resolve();  
 });  
 return dfd.promise();  
}  
$.when(doThing()).then(function(){  
 console.log('YAY, it is finished');  
});

यहाँ छोटा कोड है:

function doThing(){return $.get('some/slow/url',function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log('YAY, it is finished')});

इस बार केवल एक था 26 प्रतिशत कमी - कोड के ऐसे मामूली ब्लॉक के लिए यह अभी भी बहुत अच्छा है।

जावास्क्रिप्ट और डीओएम के लिए हमारी मार्गदर्शिका से एक अंतिम उदाहरण यहां दिया गया है:

//declare a new variable to hold a new h1 element  
var newHeading = document.createElement('h1');  
//add the text node to the document  
var h1Text = document.createTextNode('Heading Level 1');  
//make it a child node of the new heading  
newHeading.appendChild(h1Text);  
//append this as a child of element defined as 'bt'  
document.getElementById('bt').appendChild(newHeading);

ध्यान दें कि कैसे हैं ढेर सारा टिप्पणियों और सफेद जगह की। छोटा संस्करण ने फाइलसाइज को कम कर दिया 52 प्रतिशत :

ऑपरेटिंग सिस्टम को कैसे ठीक करें विंडोज़ 10 नहीं मिला

var newHeading=document.createElement('h1'),h1Text=document.createTextNode('Heading Level 1');newHeading.appendChild(h1Text),document.getElementById('bt').appendChild(newHeading);

यहाँ कुछ सामान्य जावास्क्रिप्ट पुस्तकालयों के आकार उनके छोटे संस्करणों की तुलना में दिए गए हैं:

हाईचार्ट्स: 1 एमबी > 201 केबी
jQuery: 270 केबी > 90 केबी
मूटूल: 164 केबी > 93 केबी

इनमें से कुछ पुस्तकालय संकुचित होने पर एक महत्वपूर्ण आकार में कमी दिखाते हैं ( ~80 प्रतिशत ), जबकि अन्य बहुत अच्छे नहीं हैं ( ~40 प्रतिशत ) उस ने कहा, कोई भी बचत आपकी वेबसाइट को आपके उपयोगकर्ताओं के लिए तेज़ कर देगी, और आपके वेब सर्वर पर तनाव कम कर देगी।

आप कैसे छोटा करते हैं?

अब आप जानते हैं कि यह कैसे काम करता है और यह कैसा दिखता है, आइए जानें कि इसे कैसे करना है। चिंता न करें, अपने कोड को मैन्युअल रूप से संशोधित करने की कोई आवश्यकता नहीं है! विभिन्न प्रकार के उपकरण स्वतंत्र रूप से उपलब्ध हैं जो आपके लिए प्रक्रिया को संभालते हैं।

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

यहां ऑनलाइन टूल का संक्षिप्त राउंड अप दिया गया है। वे ज्यादातर वही काम करते हैं इसलिए आपको इस बारे में ज्यादा चिंता करने की ज़रूरत नहीं है कि कौन सा चुनना है।

JSCompress -- मैं व्यक्तिगत रूप से इस वेबसाइट का सबसे अधिक उपयोग करता हूं यदि यह सिर्फ एक त्वरित काम है। यह चलाने में तेज़ है और वे आपको वे उपकरण भी दिखाते हैं जिनका उपयोग उन्होंने इसे बनाने के लिए किया था।

जावास्क्रिप्ट मिनीफायर -- यह उपकरण अच्छी तरह से काम करता है, लेकिन यह वास्तव में एक एपीआई के रूप में चमकता है। यह आपको उनकी मौजूदा वेबसाइट के शीर्ष पर अपना स्वयं का एकीकरण या सेवा बनाने देता है।

जावास्क्रिप्ट मिनिफायर - इसी नाम की एक और वेबसाइट, यह टूल जितना आसान है उतना ही आसान है। कोई विकल्प या मेनू नहीं, बस एक बटन।

छोटा करना - यह वेबसाइट अद्भुत दिखती है, और डेवलपर्स ने यहां विवरण पर स्पष्ट रूप से ध्यान दिया है।

यह सूची हमेशा के लिए जा सकती है। वेबसाइटों को छोटा करने के लिए इतने सारे ऑनलाइन टूल हैं कि गलत होना मुश्किल है।

मिनिफाइंग टूल आपके लिए कमांड लाइन टूल या प्लगइन्स के रूप में भी मौजूद हैं जावास्क्रिप्ट संपादक . ये उपकरण अक्सर उपयोग करने के लिए बहुत तेज़ होते हैं, और आपके मौजूदा कोड के साथ 'बस काम करते हैं'। कॉपी और पेस्ट करने की कोई आवश्यकता नहीं है, और आपको अपनी जावास्क्रिप्ट को किसी भी HTML या CSS से निकालने की आवश्यकता नहीं है जो एक ही फ़ाइल में हो सकती है।

यदि आप Microsoft Visual Studio का उपयोग कर रहे हैं, तो बंडलर और मिनीफायर मार्केटप्लेस से एक्सटेंशन के 600,000 से अधिक इंस्टाल हैं! इतना ही नहीं, बल्कि इसे नियमित रूप से अपडेट किया जाता है और गिटहब पर उपलब्ध है .

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

अंत में, यदि आप एक हैं PyCharm उपयोगकर्ता, आप कर सकते हैं इसे एकीकृत करने के लिए कॉन्फ़िगर करें सीधे कई सामान्य संपीड़न उपकरण जैसे कि यूयूआई कंप्रेसर . इनमें से कई टूल ऊपर सूचीबद्ध ऑनलाइन टूल को सीधे पावर देते हैं।

चेतावनियां

वहां है पकड़ने के लिए सही? कुछ भी कभी पूर्ण नहीं हो सकता। ठीक है, हाँ, एक समस्या है, लेकिन यह काफी मामूली है और आसानी से काम करती है:

मिनिफ़ाइड कोड को उसकी मूल स्थिति में पुनर्स्थापित नहीं किया जा सकता है।

जब आप किसी कोड को छोटा करते हैं, तो उसका मूल स्वरूप खो जाता है। यदि आप आसानी से बड़े परिवर्तन करने की कोई आशा रखना चाहते हैं तो आपको इसकी एक प्रति रखनी होगी -- यह संस्करण नियंत्रण का उपयोग करने के लिए पर्याप्त नहीं है।

जबकि यह संभव है छोटा करना आपका कोड, यह फिर से वही नहीं है। आपकी सभी मूल्यवान टिप्पणियाँ एक बात के लिए खो जाती हैं।

यह कोई बड़ी समस्या नहीं है, लेकिन कोडिंग करते समय आपको इसे ध्यान में रखना होगा। एक बुनियादी नियम के रूप में, असम्पीडित > विकासशील और दबा हुआ > उत्पादन।

अब आप जावास्क्रिप्ट को छोटा करने के बारे में सब कुछ जानते हैं! कोड को छोटा करना सर्वर से प्रदर्शन को कम करने के तरीकों में से एक है, और सभी बड़ी वेबसाइटें ऐसा कर रही हैं।

अपने कोड को छोटा करने के लिए आप किन उपकरणों का उपयोग करते हैं? क्या आप भी परेशान करते हैं? नीचे टिप्पणी करके हमें बताएं!

पुरानी हार्ड ड्राइव को कैसे एक्सेस करें

छवि क्रेडिट: शटरस्टॉक के माध्यम से नवीनतार

साझा करना साझा करना कलरव ईमेल डिस्क स्थान खाली करने के लिए इन विंडोज़ फ़ाइलों और फ़ोल्डरों को हटाएं

अपने Windows कंप्यूटर पर डिस्क स्थान साफ़ करने की आवश्यकता है? यहां विंडोज़ फ़ाइलें और फ़ोल्डर्स हैं जिन्हें डिस्क स्थान खाली करने के लिए सुरक्षित रूप से हटाया जा सकता है।

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
जावास्क्रिप्ट
जावा
वेब डिजाइन

लेखक के बारे में जो कोबर्न(136 लेख प्रकाशित)

जो ब्रिटेन के लिंकन विश्वविद्यालय से कंप्यूटर विज्ञान में स्नातक हैं। वह एक पेशेवर सॉफ्टवेयर डेवलपर है, और जब वह ड्रोन नहीं उड़ा रहा है या संगीत नहीं लिख रहा है, तो उसे अक्सर तस्वीरें लेते या वीडियो बनाते हुए पाया जा सकता है।

जो कोबर्न . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें