ASP.NET वेबसाइट प्रोजेक्ट में CSS और जावास्क्रिप्ट मिनिफिकेशन

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

सभी जुड़े स्क्रिप्ट और शैलियों के साथ बनाया गया पृष्ठ 5 एमबी (लगभग 200 फाइलें) से अधिक वजन का होता है। HTML कोड में अकेले उत्पन्न DOM ट्री में 500,000 से अधिक बाइट्स हैं। उपयोगकर्ता पेज लोड करने के बाद 5 सेकंड से पहले सिस्टम के साथ काम करना शुरू कर सकता है (स्क्रिप्ट्स, एक्सटीजेएस, आदि का आरंभ)।

जैसा कि यह पता चला है, ग्राहक के पास एक स्थानीय क्षेत्र नेटवर्क है और अक्सर एक ही पृष्ठों के साथ काम कर रहा है (ब्राउज़र में अंतर्निहित कैशिंग होना चाहिए), कभी-कभी पृष्ठों को लोड करने में समस्याएं होती हैं। इसलिए, यह IE8 में ExtJS के समग्र प्रदर्शन पर सर्वर अनुरोधों की संख्या को कम करने और काम करने का निर्णय लिया गया था।

लिपियों को छोटा करने के लिए, मैंने सबसे पहले Google क्लोजर कंपाइलर को डाउनलोड किया, सबसे लोकप्रिय में से एक के रूप में, और निगम कुछ भी नहीं करेगा ...

Google बंद करने वाला कंपाइलर

मैंने स्क्रिप्ट कंप्रेशर में फाइल कंप्रेसर.जर लगा दी। इसे चलाने के लिए, मुझे जावा स्थापित करना था। मैंने दो कमांड के साथ लॉन्च करने के लिए एक बैट-फ़ाइल बनाई, जिसमें से अंतिम केवल 10 सेकंड की देरी करता है ताकि आप संभावित त्रुटियों को देखने के लिए समय पकड़ सकें और कमांड प्रॉम्प्ट विंडो को स्वयं बंद कर सकें। यहाँ इस तरह से मैंने सभी लिपियों को एक फाइल में मिला दिया, वजन लगभग डेढ़ गुना कम हो गया (यह बल्ले-फाइल की सामग्री है):

cd %0\..\ java -jar compiler.jar --js=NavigationJS.js --js=SSSC.js (     ) --js_output_file=bcr_master.min.js ping -n 1 -w 100000 192.168.254.254 >nul 

सब कुछ सरल और सुरुचिपूर्ण है, मुझे लगभग पांच मिनट लगे। फ़ाइल की शुरुआत में cd% 0 \ .. \ कमांड की आवश्यकता होती है ताकि कमांड का आगे निष्पादन उस निर्देशिका के अंदर होता है जिसमें .bat फ़ाइल स्थित है, और कमांड लाइन शुरू करने के बाद डिफ़ॉल्ट निर्देशिका से नहीं।

लेकिन तब यह विचार न केवल JS, बल्कि CSS फाइलों और Google Clोज़, alas को भी कम से कम करने के लिए उत्पन्न हुआ, ऐसा करने में सक्षम नहीं है। इसलिए, मैंने वाईयूआई कंप्रेसर पर सब कुछ फिर से करने का फैसला किया, जिसके बारे में कई समीक्षाएं हैं, और यह सीएसएस को भी संकुचित करता है।

YUI कंप्रेसर

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

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

 cd %0\..\ copy /b .\..\..\Scripts\JSON.js + (  ) + Bids.js combined.js java -jar yuicompressor-2.4.8.jar combined.js --type js -o combined.min.js --charset cp-1251 copy /b combined.min.js + (    ) + .\..\..\Scripts\jquery\plugins.fileupload.min.js mbcrfull.min.js del combined.min.js del combined.js ::copy /b .\..\..\Styles\MPMessage.css + (  ) + .\..\..\BCR\Styles\Kondor.css combined1.css ::java -jar yuicompressor-2.4.8.jar combined1.css -o .\..\..\BCR\Styles\mbcrfull.min.css --charset cp-1251 ::del combined1.css ::copy /b .\..\..\Styles\jquery\ui.all.css + (  ) + .\..\..\Styles\jquery\jqueryslidemenu.css combined2.css ::java -jar yuicompressor-2.4.8.jar combined2.css -o .\..\..\Styles\jquery\mbcrfull.min.css --charset cp-1251 ::del combined2.css ::ping -n 1 -w 10000 192.168.254.254 >nul 

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

• सबसे पहले, आपको छवियों के सापेक्ष पथों के उपयोग की सावधानीपूर्वक निगरानी करने की आवश्यकता है। एक्सटीजेएस और अन्य पुस्तकालयों की शैली रिश्तेदार रास्तों पर आधारित हैं, जिसका अर्थ है कि वे तुरंत हमारे संघ से बाहर हो जाते हैं (वैसे, अधिकांश भाग के लिए वे पहले से ही निर्धारित हैं)।
• दूसरी बात, CSS फाइलों में @import कमांड मिल सकती हैं। यह नर्क है।
• तीसरा, आप प्रत्येक फ़ोल्डर में अलग-अलग की गई संयुक्त शैली बना सकते हैं, और फिर उन्हें प्रोजेक्ट में शामिल कर सकते हैं, लेकिन जैसा कि यह निकला, हमें ऐसी फाइलें नहीं मिलेंगी और प्रदर्शन लाभ छोटा होगा। इसलिए, हमने अभी के लिए CSS minification को स्थगित करने का निर्णय लिया। (आप इस मामले में Google बंद करने वाले कंपाइलर पर रोक सकते हैं)

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

जारी करने के लिए स्वचालन को कम करें

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

और यहाँ TortoiseSVN में हुक लिपियों हमारी सहायता के लिए आते हैं!

एसवीएन क्लाइंट की सेटिंग्स में, हुक लिपियों टैब पर जाएं और हमारे प्रोजेक्ट के फ़ोल्डर और बैच फ़ाइल को स्वयं वहां चुनें। हुक प्रकार के विकल्पों में, "स्टार्ट-कम हुक" का चयन करें ताकि स्क्रिप्ट दिखाई देने से पहले कमिट हो जाए।


कमिटमेंट लॉन्च को कमिट करने से पहले कॉन्फ़िगर करें

वोइला, सब कुछ काम करता है और आपको किसी का अनुसरण नहीं करना है!

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