Asp.NetMVC4如何使用Bundle捆綁壓縮技術(shù)-創(chuàng)新互聯(lián)

這篇文章主要介紹了Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù),具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時(shí)代的郁南網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!

很多大網(wǎng)站都沒(méi)有用Bundle技術(shù)造成很多資源浪費(fèi)與性能的犧牲,別小瞧 用上了你會(huì)發(fā)現(xiàn)他的好處:

將多個(gè)請(qǐng)求捆綁為一個(gè)請(qǐng)求,減少服務(wù)器請(qǐng)求數(shù)

 沒(méi)有使用Bundle技術(shù),debug下看到的是實(shí)際的請(qǐng)求數(shù)與路徑

 Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

使用Bundle技術(shù),并且擁有緩存功能
調(diào)試設(shè)置為Release模式并按F5或修改web.config,就可以看到合并與壓縮的效果

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

壓縮javascript,css等資源文件,減小網(wǎng)絡(luò)帶寬,提升性能

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

后臺(tái)配置

MVC4在架構(gòu)上有些變動(dòng),簡(jiǎn)化了原來(lái)的Global.asax,增加了一些靜態(tài)的配置文件在App_Start下面,留意下BundleConfig.cs,顧名思義是Bundle的配置,所有它的配置在這里進(jìn)行就可以了,當(dāng)然也可以單獨(dú)的配置文件。

復(fù)制代碼 代碼如下:

public class BundleConfig { // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725 public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").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*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. 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")); } }

這里大家可以按模塊化去配置,我們看到的下面的Url對(duì)應(yīng)的就是上面的bundles.Add(...) 所增加的js、css的virtualPath

需要注意的是不同virtualPath 增加的相同的資源文件,會(huì)被重復(fù)加載!

Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

前臺(tái)調(diào)用

 對(duì)于公共的資源文件,通常我們都會(huì)放到_Layout.cshtml (webform中的母板頁(yè)) 文件中

   Script文件引用:@Scripts.Render(virtualPath[,virtualPath2][,virtualPath3][,...])
 CSS文件引用:  @Styles.Render(virtualPath[,virtualPath2][,virtualPath3][,...])

復(fù)制代碼 代碼如下:

@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css")

...

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("scripts", required: false)

正則匹配需要的,過(guò)濾不需要的

復(fù)制代碼 代碼如下:

bundles.IgnoreList.Clear(); bundles.IgnoreList.Ignore("*.debug.js"); bundles.IgnoreList.Ignore("*.min.js"); bundles.IgnoreList.Ignore("*-vsdoc.js"); bundles.IgnoreList.Ignore("*intellisense.js"); bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js")); //匹配jquery版本    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", //匹配文件名前綴為jquery.unobtrusive "~/Scripts/jquery.validate*")); ...

使用CDN

復(fù)制代碼 代碼如下:

bundles.UseCdn = true; //使用CDN string jqueryCdn = "http:deom.jb51.net/jslib/jquery/jquery-1.7.1.min.js"; bundles.Add(new ScriptBundle("~/bundles/jquery", jqueryCdn).Include( "~/Scripts/jquery-{version}.js"));

當(dāng)cdn服務(wù)器掛了或不能訪問(wèn)了,這里就會(huì)選擇本地的資源文件,debug下mvc 會(huì)讓我們看到他原來(lái)的面具,這點(diǎn)非常好利于我們調(diào)試?! ?br/>Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Asp.Net MVC4如何使用Bundle捆綁壓縮技術(shù)”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司,,關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

當(dāng)前標(biāo)題:Asp.NetMVC4如何使用Bundle捆綁壓縮技術(shù)-創(chuàng)新互聯(lián)
文章來(lái)源:http://muchs.cn/article12/ddjggc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、云服務(wù)器、服務(wù)器托管、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)