एएसपी.नेट एमवीसी 4 jQuery/जावास्क्रिप्ट बंडल का उपयोग

Question

जब मैंने मानक एमवीसी 4 टेम्पलेट के साथ अपनी परियोजना बनाई, तो जावास्क्रिप्ट के बहुत सारे शामिल थे, उदाहरण: jquery-obtrusive, jquery-validate, knockout, संपूर्ण jQuery UI।

इसमें से कितना मूल्यवान है और कितना फेंक दिया जाता है? मैंने देखा है जब आपके द्वारा बनाए गए एक जोरदार टाइप किया नियंत्रक create.cshtml दृश्य जनरेट किए गए कॉल्स:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

वास्तव में क्या इस फाइल को क्या करता है? क्या मुझे इसे रखना चाहिए? क्या मुझे इन सभी जेएस फ़ाइलों का संदर्भ देना चाहिए जिन्हें प्रारंभ में BundleConfig.cs में परिभाषित किया गया था? या मैं परेशान नहीं कर सकता ..?

Answer 1

यह फ़ाइल वास्तव में क्या करती है?

jqueryval एक फ़ाइल नहीं है यह एक बंडल का संदर्भ है।

एमवीसी 4 में एक बंडल स्क्रिप्ट, शैलियों या अन्य फ़ाइलों को एक बंडल में एक साथ बंडल का संग्रह है।

आपके पास फ़ाइल App_Start फ़ोल्डर में होगी, जिसमें कौन सी फ़ाइल को बंडल में जोड़ा गया है, इसकी सेटिंग्स शामिल हैं।

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
      "~/Scripts/jquery.unobtrusive*", 
      "~/Scripts/jquery.validate*")); 

आप ~/bundles/jqueryval ऊपर देख सकते हैं बंडल जो इसे में निर्दिष्ट फ़ाइलों को जोड़ती है की आभासी मार्ग है। तो बाद में जब आप इसे देखते हैं:

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

उपर्युक्त में उस संदर्भ के तहत बंडल की गई स्क्रिप्ट शामिल होंगी।

क्या मुझे इसे रखना चाहिए? क्या मुझे इन सभी जेएस फाइलों का संदर्भ देना चाहिए जो में शुरू में BundleConfig.cs में परिभाषित किए गए थे?

jqueryval बंडल के मामले में आप पाएंगे कि अविभाज्य और सत्यापन स्क्रिप्ट शामिल हैं बहुत उपयोगी हैं।

वे स्क्रिप्ट हैं जो आपके डोम को अच्छे और साफ रखने के लिए अविभाज्य सत्यापन का प्रबंधन करने का ख्याल रखेंगे।

यदि आपको आवश्यकता नहीं है या अविभाज्य सत्यापन का उपयोग करना चाहते हैं तो आप बंडल ऑफ कोर्स को हटा सकते हैं। यदि आप करते हैं तो मुझे विश्वास है कि आप भी false करने के लिए आवश्यक क्षेत्रों की स्थापना अपनी परियोजना सुनिश्चित करने के लिए, अपने web.config अपडेट करनी होगी फ़ाइलें, इस के समान की तलाश में नहीं किया जाएगा:

<add key="ClientValidationEnabled" value="false" /> 
<add key="UnobtrusiveJavaScriptEnabled" value="false" /> 

लाभ और सटीक अंतर घुसपैठ और अविभाज्य सत्यापन का उपयोग करने के बीच इस आलेख में बहुत अच्छी तरह से समझाया गया है: Brad Wilson: Unobtrusive Client Validation in ASP.NET MVC 3

सामान्यतः, मुझे लगता है कि आपको केवल वही शामिल करना अच्छा होगा जो आपको चाहिए। यदि आपको बंडल में निर्दिष्ट सभी फ़ाइलों की आवश्यकता नहीं है, तो उन फ़ाइलों को हटाएं, बंडल को एक साथ छोड़ दें या अपने स्वयं के कस्टम बंडल बनाएं।

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

---

सामान्य तौर पर, यह भी bundling शैली-पत्रक के साथ काम करता है:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
      "~/Content/themes/base/jquery.ui.core.css", 
      "~/Content/themes/base/jquery.ui.resizable.css", 
      "~/Content/themes/base/jquery.ui.selectable.css", 
      "~/Content/themes/base/jquery.ui.accordion.css", 
      "~/Content/themes/base/jquery.ui.autocomplete.css", 
      "~/Content/themes/base/jquery.ui.button.css", 
      "~/Content/themes/base/jquery.ui.dialog.css", 
      "~/Content/themes/base/jquery.ui.slider.css", 
      "~/Content/themes/base/jquery.ui.tabs.css", 
      "~/Content/themes/base/jquery.ui.datepicker.css", 
      "~/Content/themes/base/jquery.ui.progressbar.css", 
      "~/Content/themes/base/jquery.ui.theme.css")); 

डेवलपर के लिए लाभ केवल एक व्यक्ति के बंडल संदर्भ के लिए कई फ़ाइलों के बजाय हो रही है।

क्लाइंट को लाभ यह है कि स्क्रिप्ट/सीएसएस फ़ाइलों को प्राप्त करने के लिए ब्राउजर को कितने व्यक्तिगत लोड करना पड़ता है।

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

हालांकि, अगर आपके पास एक ही बंडल में रहने के लिए कॉन्फ़िगर की गई सभी 5 फ़ाइलें हैं, तो ब्राउज़र केवल 1 फ़ाइल डाउनलोड करता है, बंडल वाला एक।

इसके अलावा बंडल को (या बंडलों में फाइलें) को छोटा कर दिया जाता है, इसलिए आप न केवल स्क्रिप्ट डाउनलोड करने के लिए समय पर बचत कर रहे हैं बल्कि आप डाउनलोड आकार पर भी बचत करते हैं।

जब आप इसका परीक्षण करते हैं, तो डीबग मोड में नोट कोई अंतर नहीं है, आपको RegisterBundles विधि के नीचे BundleConfig.cs फ़ाइल में बंडल तालिका के अनुकूलन को सक्षम करने की आवश्यकता है।

BundleTable.EnableOptimizations = true; 

आपको बंडलों का उपयोग करने की आवश्यकता नहीं है, फिर भी आप स्वतंत्र रूप से अलग-अलग स्क्रिप्ट/सीएसएस फ़ाइलों का संदर्भ दे सकते हैं। यह चीजों को आसान बनाता है हालांकि आपको इसकी आवश्यकता होती है।

Answer 2

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

सिस्टम.Web.Optimization क्लास Bundling और minification तकनीक प्रदान करता है जो Microsoft.Web.Optimization dll में मौजूद है।

बंडल एक बंडल एक HTTP अनुरोध के साथ लोड की गई फ़ाइलों का एक तार्किक समूह है। आप BundleColfig.cs फ़ाइल में BundleCollection Class Add() विधि को कॉल करके क्रमशः सीएसएस और जावास्क्रिप्ट के लिए शैली और स्क्रिप्ट बंडल बना सकते हैं।

शैली बंडल

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.min.css", 
"~/Content/mystyle.min.css")); 

बनाना उत्तर के लिए स्क्रिप्ट बंडल बनाना

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery-1.7.1.min.js", 
"~/Scripts/jquery.validate.min.js", 
"~/Scripts/jquery.validate.unobtrusive.min.js"));