👩🏾‍🤝‍👨🏻 🗞️ 🗑️ जावास्क्रिप्ट फ़ाइलों का संयोजन 🤵🏽 🍌 🔢

गर्म दीपक WEB 1.0 का युग बीत चुका है, और हाल ही में हम उन पृष्ठों के साथ काम कर रहे हैं जो तथाकथित गतिशीलता के साथ चल रहे हैं। जावा, फ्लैश, सिल्वरलाइट जैसे जावास्क्रिप्ट, VbScript और प्लगइन्स का उपयोग करके डायनामिज्म प्राप्त किया जा सकता है। इस लेख में मैं संभावित वेबसाइट अनुकूलन में से एक पर स्पर्श करना चाहता हूं - सभी जावास्क्रिप्ट फ़ाइलों को एक में संयोजित करना।

क्यों?

इसके दो मुख्य कारण हैं:

पेज लोड करने की गति में सुधार।
सर्वर लोड कम किया गया।

चलो "बढ़ती डाउनलोड गति" से शुरू करते हैं। अक्सर एक वेब साइट केवल स्क्रिप्ट से भरी होती है और उनकी कुल संख्या 50 से अधिक हो सकती है। हालांकि, यह पहले से ही एक "नैदानिक मामला" होगा। लेकिन कम से कम 15-30 नियमित रूप से पाया जाता है। प्रत्येक ~~छींक~~ स्क्रिप्ट के लिए, ब्राउज़र एक अनुरोध भेजता है और, प्रतिक्रिया के आधार पर, या तो इसे पूरी तरह से लोड करता है, या इसे कैश से लेता है। 15 अनुरोध बहुत है। इसमें समय लगता है। हां, सभी आधुनिक ब्राउज़र समानांतर में फ़ाइलों को डाउनलोड करते हैं, लेकिन यह उनके जैसा शोषण करने का कारण नहीं है। मेरे मामले में, पृष्ठ लोड करने की गति कई बार बढ़ी है।

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

कैसे?

मेरा मानना है कि केवल दो मुख्य तरीके हैं:

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

पहले मामले में, हमें बहुत अधिक नफरत वाले निष्कासन से छुटकारा मिलता है, लेकिन हम ब्राउज़र को अप्रयुक्त कोड को संकलित करने के लिए मजबूर करते हैं। दूसरे मामले में, हम eval का उपयोग करते हैं, ब्राउज़र को पहले से संकलित फ़ाइल के भाग को संकलित करने के लिए मजबूर करते हैं। यह सब कुछ इस तरह दिखता है:

//  . window.__js = { 'engine': function(){ /*  */ }, 'some': function(){ /*  */ } }; //  window.__js = { 'engine': '/*  */', 'some': '/*  */' };

लेकिन मेरे पास कोई विकल्प नहीं था, क्योंकि इंजन का उपयोग "संदिग्ध गुणवत्ता" कोड के साथ किया जा रहा है। मैं एक अनाम फ़ंक्शन में ऐसे कोड को लपेट नहीं सकता, क्योंकि:

 //  1 function some(){ ... } //  2 some();

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

 function(){ function some(){ ... }; }

यह window.some के लिए नेतृत्व नहीं करता है! == अपरिभाषित; कुछ फ़ंक्शन को अनाम फ़ंक्शन के दायरे में परिभाषित किया गया है, न कि खिड़की बिल्कुल, जैसा कि अगर यह एक अलग फ़ाइल में परिभाषित किया गया है। इस समस्या का समाधान jQuery में पाया गया था। तथ्य यह है कि आप का उपयोग करके वैश्विक कोड में जावास्क्रिप्ट कोड निष्पादित कर सकते हैं:

 ( window.execScript || function( data ) { window[ "eval" ].call( window, data ); } )( data );

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

कम्प्रेशन और ओब्सेक्शन

एक सूची में सभी फ़ाइलों की विधानसभा के समानांतर में, हम उनका मजाक उड़ा सकते हैं। सबसे पहले, उन्हें निचोड़ा जा सकता है, और दूसरी बात, उनकी पठनीयता को बर्बाद किया जा सकता है। ऐसा करने के लिए, आप YUI कंप्रेसर या किसी समकक्ष का उपयोग कर सकते हैं। परिणामस्वरूप, हमें एक पंक्ति में संपीड़ित (इंडेंटेशन, अतिरिक्त रिक्त स्थान, स्थानीय चर के संक्षिप्त नाम आदि) के बिना थोड़ा कम कोड मिलता है।

व्यवस्था

कार्य का सबसे आसान हिस्सा। एल्गोरिथ्म उतना ही सरल है जितना महसूस किए गए जूते:

हम फ़ाइलों की सूची के माध्यम से चलाते हैं (आप मास्क का उपयोग कर सकते हैं, उदाहरण के लिए: js / *। Js)।
हमें याद है कि जिस तारीख को फाइल बदली गई थी।
हम इसे पहले से ही संपीड़ित फ़ाइल की निर्माण तिथि के साथ जांचते हैं, यदि कोई हो।
यदि फ़ाइल अपडेट की गई है, या यदि कोई भी प्रतिलिपि संकुचित नहीं है, तो उसे अलग निर्देशिका में संपीड़ित करें और सहेजें (या उपसर्ग का उपयोग करें, उदाहरण के लिए: min _ # {file_name}।
हम संपीड़ित फ़ाइलों की सूची के माध्यम से चलाते हैं, क्रमिक रूप से उनकी सामग्री को सरणी में जोड़ते हैं।
परिणाम को "अंतिम एकल जावास्क्रिप्ट फ़ाइल" में सहेजें

अंत में क्या होना चाहिए, इसका एक उदाहरण यहां पाया जा सकता है । आप इस एल्गोरिथ्म को मैन्युअल रूप से या प्रत्येक पृष्ठ को लोड करते समय सक्रिय कर सकते हैं।

डिबगिंग

एक प्रोग्रामर का जीवन अद्भुत होगा यदि यह उन कई बगों के लिए नहीं था जिनमें गलत समय पर दिखाई देने और अच्छी तरह से छिपाने की आदत है। फिर आपके साथ हमारा उपक्रम सभी मोर्चों पर क्रैश हो जाता है। हमारा कोड अपठनीय है, फायरबग उस पर लटका हुआ है, और त्रुटियां इंगित करती हैं कि कहां है। इसके अलावा, अधिकांश चरों में a, b, c होता है। क्रोम हमारी सहायता के लिए आता है। तथ्य यह है कि वह कोड को पूरी तरह से पठनीय स्थिति (लिपियों के टैब में संदर्भ मेनू) में "डी-ऑबफ्यूसेट" कर सकता है। उदाहरण के लिए:

 function oa(a) { var b = 1, c = 0, d; if (!D(a)) { b = 0; for (d = a[s] - 1; d >= 0; d--) c = a.charCodeAt(d), b = (b << 6 & 268435455) + c + (c << 14), c = b & 266338304, b = c != 0 ? b ^ c >> 21 : b; } return b; }

परिणाम मूल से बहुत दूर है, लेकिन यह कम से कम पढ़ा जा सकता है। दुर्भाग्य से, ब्रेकपॉइंट्स सेट करने और उन्हें ट्रिगर करने के साथ कुछ समस्याएं हैं। लेकिन मछलीहीनता और कैंसर मछली हैं। आप रह सकते हैं।

अंतिम स्पर्श

यदि हम निर्माण / * // @ sourceURL = # {name} * / को कोड के अंत में जोड़ते हैं जो कि eval से होकर गुजरेगा, तो क्रोम हमें स्क्रिप्ट लिस्ट में दिए गए # {name} को दिखाएगा। दुर्भाग्य से, फ़ायरफ़ॉक्स में यह तंत्र मेरे लिए काम नहीं करता था। मुझे IE के लिए एक आवरण टिप्पणी की आवश्यकता थी।

के उपयोग

"सिंगल फाइल" के साथ स्थानीय रूप से कार्य करना असुविधाजनक है, इसलिए आप इस बाइक की तरह कुछ लिख सकते हैं:

 window.__js_ready = {}; function __include( name ) { //       if( !__js_ready[ name ] ) { __js_ready[ name ] = true; //   if( ONLINE ) // "" { ( window.execScript || function( data ) { window[ "eval" ].call( window, __js[ name ] ); } )( data ); } else //  { //      ,  //  document.write } } }

 //  html  <script type="text/javascript"> __include( 'engine' ); </script> <script type="text/javascript"> //  "engine" </script>

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

विपक्ष

एक "एकल स्क्रिप्ट" संकलित करने की आवश्यकता।
डिबगिंग में कठिनाई।
पहले लॉन्च के समय उपयोगकर्ता एक ही बार में सभी साइट स्क्रिप्ट लोड कर देता है। हालाँकि, माइनस gzip का उपयोग करने के मामले में वंचित था।

जावास्क्रिप्ट फ़ाइलों का संयोजन