👩🏻‍🎓 😲 🧑🏿‍🤝‍🧑🏿 ASP.NET और क्लाइंट कोड संपीड़न 🖇️ ⛲️ 👨‍👩‍👦

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

  ...
 // ubepua07 / default / main / SonyStyle / WORKAREA / कॉमन / SonyStyleStorefrontAssetStore / शामिल / CMSpot
 ...

और पूरे खेत के निचले हिस्से में यह पाठ है:

  ...
 (डेवलपर्स को अपने परिवर्तनों को लॉग करना चाहिए, जिसमें संदर्भ के लिए लाइन नंबर शामिल है)
 ...

यहाँ Yandex से टिप्पणियों का एक उदाहरण है:

  "क्या आप कंसोल में देखना पसंद करते हैं? या शायद आपको पता है कि js कैसे लिखना है? ..."

मैं कई स्थितियों के बारे में बात करना चाहता हूं, जिनसे मुझे अक्सर निपटना पड़ता है:

विधानसभा में संसाधनों के रूप में ग्राहक कोड
WebForms या MVC समाधान फ़ाइलों के रूप में क्लाइंट कोड
स्थैतिक संसाधनों के लिए साइट पर स्थित क्लाइंट कोड (http://static.sitename.com)

लेख के पाठ में मैं एक स्व-लिखित उपकरण का उपयोग करता हूं : सोर्सक्रंचर । HTML, CSS, और JS स्क्रिप्ट्स को shader समर्थन और एक अधिक कुशल संपीड़न प्रक्रिया के साथ संपीड़ित करने के लिए बहुत अधिक कुशल उपकरण हैं। (मैंने ब्राउज़र द्वारा पार्सर कोड और स्क्रिप्ट को पार्स करने की प्रक्रिया की अधिक विस्तृत समझ के लिए अपना संस्करण लिखा।)

विधानसभा में संसाधनों के रूप में ग्राहक कोड।

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

(प्रोजेक्ट प्रॉपर्टीज → बिल्ड इवेंट्स → {प्री-बिल्ड इवेंट कमांड लाइन / पोस्ट-बिल्ड इवेंट कमांड लाइन})
इस विधि को काम करने के लिए, आपको हमारी क्लाइंट फ़ाइलों को एक अस्थायी फ़ाइल में कॉपी करने के लिए कमांड को पंजीकृत करने की आवश्यकता है। इसके लिए कॉपी कमांड जिम्मेदार है:

  कॉपी "$ (ProjectDir) Script.js" "$ (ProjectDir) Script.orig.js" / V / Y

फिर, आपको स्क्रिप्ट फ़ाइल पर संपीड़न लागू करने की आवश्यकता है। इस प्रोजेक्ट में, संपीड़न प्रोग्राम रूट फ़ोल्डर में स्थित है:

  "$ (सॉल्यूशनडियर) .. \ .. \ SourceCruncher.exe" /IO:"$(ProjectDir)Script.js "/ Y

असेंबली को इकट्ठा करने के बाद, हमारे क्लाइंट स्क्रिप्ट को उसके मूल रूप में वापस करना आवश्यक है। ऐसा करने के लिए, फ़ाइल के संकुचित संस्करण को गैर-संपीड़ित संस्करण में "पोस्ट-बिल्ड इवेंट कमांड लाइन": ":

  चाल / Y "$ (ProjectDir) Script.orig.js" "$ (ProjectDir) Script.js"

महत्वपूर्ण!
एक सफल निर्माण के बाद ही पोस्ट-बिल्ड इवेंट को सक्षम करना याद रखें:

  पोस्ट-बिल्ड ईवेंट चलाएँ: सफल बिल्ड पर।

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

WebForms या MVC समाधान फ़ाइलों के रूप में क्लाइंट कोड

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

सर्वर तक भौतिक पहुँच नहीं हो सकती है।
कार्रवाई स्पष्ट नहीं है।

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

इसलिए, एक छोटे से ऐड-इन को लिखने के बाद, मैंने इसमें आवश्यक कमांड जोड़े और जीवन का आनंद लिया। उदाहरण के लिए, Style.css फ़ाइल को संपीड़ित करने के लिए कमांड इस तरह दिखाई देती है:

  "$ (सॉल्यूशनडायर) \ सॉल्यूशन आइटम \ सोर्सक्रंचर। Exe" /IO:"\\serverver\Path\styles\Style.css "/ Y

शुरुआत में, कोई समस्या नहीं थी, क्योंकि प्रत्येक प्रोजेक्ट को केवल एक फ़ोल्डर में रखा गया था और फ़ोल्डर का मार्ग हार्डकोड किया जा सकता था। लेकिन अगर आपको परेशानी-मुक्त सर्वर ऑपरेशन की आवश्यकता है, तो उपयोगकर्ताओं को App_Offile.html संदेश के साथ डिस्कनेक्ट करना, मुझे लगता है कि यह नैतिक नहीं है। इसलिए सबसे पहले मैंने 2 फ़ोल्डर्स में प्रोजेक्ट्स को फैलाना शुरू किया। सिद्धांत रूप में, कार्यशील संस्करण / पिछला संस्करण। पहले मैंने इस समस्या को इस तरह हल किया:

मैं ADSI के माध्यम से IIS से जुड़ा हुआ हूं
मैं उस फ़ोल्डर का पथ लेता हूं जिसमें समाधान मेरे लिए काम करता है
{ProjectName} _PrevVersion फ़ोल्डर की संपूर्ण सामग्री हटाएं
मैं इस फ़ोल्डर से {ProjectName} _PrevVersion फ़ोल्डर में संपूर्ण समाधान की प्रतिलिपि बनाता हूं
मैं कार्यशील फ़ोल्डर से {ProjectName} _PrevVersion फ़ोल्डर में समाधान स्विच करता हूं
मैंने एक काम करने वाले फ़ोल्डर में समाधान फैलाया
मैं फ़ोल्डरों को {ProjectName} _PrevVersion से कार्यशील फ़ोल्डर में स्विच करता हूं।

लेकिन इस दृष्टिकोण को बहुत समय लगता है, इस तथ्य के बावजूद कि यह सब अपने आप हल हो जाता है। और अगर पूरी परियोजना डीएफएस पर टिकी हुई है, तो सर्वर फ़ाइलों को फेरबदल करने का अतिरिक्त काम करेंगे।
मुझे आगे खुदाई करनी पड़ी ... स्टूडियो के लिए विज्ञापन-इन'ओव के विकास के लिए प्रलेखन में उस तरीके का एक भी उल्लेख नहीं है जहां समाधान किया गया था। परिणामस्वरूप, याददाश्त खोदने का सबसे सीधा तरीका था। मेरी राहत के लिए, प्रकाशन कोड प्रबंधित कोड में लिखा गया है, इसलिए प्रतिबिंब का उपयोग करने से मुझे वीएस 2005 और 2008 के लिए चर स्थान को जल्दी से खोजने में मदद मिली। वीएस 2010 के लिए, चर स्थान जहां फ़ोल्डर का रास्ता जहां समाधान रखा गया था, उसे लंबे समय तक खोजा जाना था, क्योंकि डेवलपर्स ने प्रोफ़ाइल प्रकाशित किया।
नतीजतन, हमें एक ऐड-इन मिला है जो आपको एक प्रोजेक्ट बिछाने से पहले और बाद में मनमाने आदेशों को निष्पादित करने की अनुमति देता है।

ऐड-इन स्थापित करें

(विजुअल स्टूडियो 2008 के लिए उदाहरण, लेकिन वीएस 2010 से कोई मतभेद नहीं हैं।)
AddIn मेनू आइटम

ऐड-इन के साथ एक विंडो लॉन्च करना:

दुर्भाग्य से, केवल एक स्थापना विकल्प है - हैंडल। इंस्टॉलर, अफसोस, नहीं।:

पूरे संग्रह को डाउनलोड करें और इसे वांछित फ़ोल्डर में अनपैक करें (या यदि आप पहले से ही एक हैं, तो एड-इन के साथ एक प्रसिद्ध फ़ोल्डर में)।
फिर, स्टूडियो खोलें: उपकरण → विकल्प → एड-इन / मैक्रोज़ सुरक्षा और ऐड-इन फ़ाइल पथ विंडो में, वह पथ निर्दिष्ट करें जिसे आपने चरण एक में निर्दिष्ट किया था। (या इस सूची में निर्दिष्ट फ़ोल्डर में अनपैक्ड फ़ाइलों को स्थानांतरित करें)।
हम स्टूडियो को पुनः आरंभ करते हैं, ऐड-इन को "ऐड-इन मैनेजर" के माध्यम से सक्षम करते हैं (टूल → ऐड-इन मैनेजर ... → फ्लैटबेड.ईएनवीडीटीई)
और "Flatbed.EnvDTE गुण" कमांड टूल मेनू में दिखाई देता है।
उसके बाद, प्रोजेक्ट लोड करें
यदि परियोजना के कई डेवलपर्स हैं, तो हम परियोजना के लिए कोड संपीड़न के लिए एक कंसोल एप्लिकेशन जोड़ते हैं (इस मामले में, उदाहरण के लिए, मेरी उपयोगिता SourceCruncher का उपयोग किया जाता है)। या कंसोल एप्लिकेशन के लिए नेटवर्क पथ निर्दिष्ट करें, जो सभी डेवलपर्स के लिए उपलब्ध होगा।
प्लग इन सेटिंग्स विंडो खोलें "PluginDTE.CmdLine" (उपकरण → फ्लैटबेड। EnvDTE गुण → PluginDTE.CmdLine)
और हम ब्याज की फाइलों को संपीड़ित करने के लिए एक कंसोल कमांड लिखते हैं। एक उदाहरण:
```
  "\\ सर्वर \ Path \ SourceCruncher.exe" /IO:" 
```
आदेश पंजीकृत होने के बाद, कमांड बचाने के लिए Ctrl + S दबाएँ। (कमांड को समाधान .sln फ़ाइल में सहेजा जाता है, इसलिए सभी प्रोजेक्ट डेवलपर्स जिनके पास यह ऐड-इन होगा, वे सभी परिवर्तन देखेंगे)।
एक ऋण है, यदि परियोजना TFS में है, तो हर बार जब आप परियोजना खोलते हैं, तो .sln फ़ाइल संपादन (चेक आउट) के लिए ली जाएगी।

पंजीकृत आदेशों को समाधान .sln फ़ाइल में सहेजा जाता है, ताकि सभी समाधान डेवलपर्स जिनके पास यह ऐड-इन होगा, आवश्यक संपीड़न का उपयोग करके समाधान को बिछाने में सक्षम होंगे।
समस्याएं हैं:
TFS 2010 का उपयोग करने में समस्या है (लिंक अब उपलब्ध नहीं है)। तदनुसार, वीएस 9 और वीएस 10 का उपयोग करते समय, जब किसी भी डेवलपर द्वारा एक समाधान खोला जाता है, तो डेवलपर द्वारा स्वचालित रूप से बदलने के लिए एसएलएन फाइल ली जाएगी।
यदि आप वीएसएस या कछुआ का उपयोग करते हैं, तो ऐसी कोई समस्या नहीं है।
TFS से संबंधित एक और समस्या है, जिसके बारे में मैंने अभी तक पूरी तरह से अध्ययन नहीं किया है: यदि .sln फ़ाइल को किसी अन्य डेवलपर द्वारा परिवर्तन के लिए लिया गया था, तो प्लगइन sln फाइल से कम्प्रेशन कमांड को नहीं पढ़ सकता है।

WebForms उदाहरण है

मैं एक ऐसी स्थिति का एक उदाहरण दूंगा जिसमें उत्पन्न लेआउट कोड अतिरिक्त पाठ के साथ भारी रूप से बदल जाता है (उदाहरण के लिए, मैंने 2007 में एंड्री शेकिन द्वारा लिखित टाइप्टर पुनरावर्तक का उपयोग किया था):

<user:TypedRepeater ID="repFilters" DataItemTypeName="Company.Dal.Catalog.FilterToc" OnItemDataBound="repFilters_ItemDataBound" runat="server"> <ItemTemplate> <tr> <td><%# Container.DataItem.FilterName %></td> <td> <%--   --%> <user:TypedRepeater ID="repFiltersString" DataItemTypeName="Company.Dal.Catalog.FilterString" runat="server"> <ItemTemplate> <asp:TextBox Text="<%# Container.DataItem.FilterValue %>" runat="server" /> </ItemTemplate> </user:TypedRepeater> <%--    --%> <user:TypedRepeater ID="repFiltersBit" DataItemTypeName="Company.Dal.Catalog.FilterBit" runat="server"> <ItemTemplate> <asp:CheckBox Checked="<%# Container.DataItem.FilterValue %>" Text="<%# Container.DataItem.FilterName %>" runat="server" /> </ItemTemplate> </user:TypedRepeater> … </td> </tr> </ItemTemplate> </user:TypedRepeater>

यदि हम कल्पना करते हैं कि 10 प्रकार के फ़िल्टर, साथ ही प्रति पृष्ठ फ़िल्टर की औसत संख्या, हो सकती है, तो क्लाइंट को भेजी गई फ़ाइल में बड़ी संख्या में स्फ़ूर्त ट्रैफ़िक होगा।

स्थैतिक संसाधनों के लिए साइट पर स्थित क्लाइंट कोड

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

सीएसएस / जेएस फाइलें एक साझा सर्वर पर प्रासंगिक फाइलों के लिंक के रूप में मुख्य समाधान के अंदर स्थित हैं।
इस मामले में, संपीड़न उन पर और साथ ही लेख के पैराग्राफ 2 में वर्णित मुख्य समाधान की फ़ाइलों पर लागू किया जा सकता है।
CSS / JS फाइलें मुख्य परियोजना में हैं और जब मुख्य समाधान निकालते हैं तो उन्हें आम सर्वर में स्थानांतरित कर दिया जाता है।
यदि टाइपसेट वीएस का उपयोग नहीं करता है, लेकिन साझा फ़ाइलों को संपादित करने के लिए अपने स्वयं के उपकरण का उपयोग करता है, तो आप क्लाइंट कोड को संपीड़ित करने के लिए प्रोग्राम के साथ संयोजन में ड्रॉपटार्ग प्रोग्राम का उपयोग कर सकते हैं।

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

ASP.NET और क्लाइंट कोड संपीड़न

विधानसभा में संसाधनों के रूप में ग्राहक कोड।

WebForms या MVC समाधान फ़ाइलों के रूप में क्लाइंट कोड

WebForms उदाहरण है

स्थैतिक संसाधनों के लिए साइट पर स्थित क्लाइंट कोड

More articles: