🦌 😙 🙏 ASP.NET वेब पेज पर बंडलिंग और मिनिमेशन जोड़ें 👲🏻 🤷🏿 🖕🏽

मैं आपको रिक एंडरसन के लेख "वेब पेज साइट पर वेब अनुकूलन जोड़ना" का अनुवाद प्रस्तुत करता हूं।

ASP.NET वेब पेज में ASP.NET बंडलिंग और मिनिमेशन (इसके बाद B / M) जोड़ते समय, हम ASP.NET MVC और वेब फॉर्म में समान नुस्खा का पालन करते हैं:

हम बंडलों की घोषणा और पंजीकरण करते हैं;
हम अपने अभ्यावेदन के कोड में बंडलों का उपयोग करते हैं।

यह आलेख ASP.NET वेब पेज पर B / M का उपयोग करने के मूल सिद्धांतों का वर्णन करता है। बी / एम पर सामान्य और अधिक विस्तृत जानकारी के लिए, मेरे बंडलिंग और मिनिमल ट्यूटोरियल देखें । आप ASP.NET MVC के साथ B / M का उपयोग करने के बारे में भी पढ़ सकते हैं , और ASP.NET वेब फॉर्म के साथ यहाँ ।

आरंभ करने के लिए, हम एक नया ASP.NET वेब पेज बनाएंगे।

Visual Studio 2012 में ASP.NET वेब पेज साइट बनाना

फिर फ़ाइल खोलें _AppStart.cshtml :

_AppStart.cshtml Solution Explorer Visual Studio 2012

और इसकी सामग्री को निम्न कोड से बदलें:

 @using System.Web.Optimization; @{ var bundles = BundleTable.Bundles; bundles.UseCdn = true; //   CDN //      jQuery,   CDN var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdnPath).Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); 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")); }

.NET 4.5 RTM के लिए Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क (B / M नामों में से एक) पर नया CDN समर्थन (टिप्पणियों के साथ चिह्नित कोड) है।

अनुवादक द्वारा ध्यान दें। अधिक सटीक होने के लिए, Microsoft ASP.NET वेब ऑप्टिमाइज़ेशन फ्रेमवर्क 1.0.0 RTM में CDN समर्थन दिखाई दिया, जो .NET फ्रेमवर्क 4.0 के तहत लिखा गया है और, तदनुसार, इसके काम के लिए .NET 4.5 की आवश्यकता नहीं है।

बंडलों का उपयोग करना

हम मास्टर पेज ( _SiteLayout.cshtml फ़ाइल) _SiteLayout.cshtml और <head> एलिमेंट में हम script टैग और link स्टाइल टैग्स को बंडल से लिंक करेंगे। मूल कोड नीचे है:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@Page.Title - My ASP.NET Web Page</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.20.js"></script> <script src="~/Scripts/modernizr-2.5.3.js"></script> <meta name="viewport" content="width=device-width" /> </head>

अब देखते हैं कि अपडेटेड कोड:

 @using System.Web.Optimization; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>@Page.Title - My ASP.NET Web Page</title> @Styles.Render("~/Content/themes/base/css", "~/Content/css") <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> @Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui", "~/bundles/modernizr") <meta name="viewport" content="width=device-width" /> </head>

परिवर्तनों के बाद, सीएसएस और जावास्क्रिप्ट कोड को बंडलों के रूप में वितरित किया जा सकता है। Render विधि ( Styles.Render उपयोग CSS के लिए किया जाता है, और Scripts.Render लिए किया Scripts.Render ।

वेब पेज के लिए डिफ़ॉल्ट कॉन्फ़िगरेशन में, compilation कॉन्फ़िगरेशन तत्व का debug विशेषता true । जब debug विशेषता true होती true , तो न तो संयोजन और न ही कोड न्यूनतम होता है। Web.config फ़ाइल खोलें और compilation तत्व में false के लिए debug विशेषता का मान बदलें, जैसा कि नीचे दिखाया गया है:

 <?xml version="1.0" encoding="utf-8"?> <configuration> <system.web> <compilation debug="false" targetFramework="4.0" /> </system.web> <!--        --> </configuration>

ASP.NET वेब पेज पर बंडलिंग और मिनिमेशन जोड़ें

बंडलों का उपयोग करना

More articles: