快捷導(dǎo)航

基于Asp.Net MVC4 Bundle捆綁壓縮技術(shù)的介紹

更新時(shí)間：2013年04月12日 16:14:02 作者：

本篇文章，小編將為大家介紹，Asp.Net MVC4 Bundle捆綁壓縮技術(shù)，有需要的朋友可以參考一下

很高興，最近項(xiàng)目用到了Asp.Net MVC4 + Entity Framework5，發(fā)現(xiàn)mvc4加入了Bundle、Web API等技術(shù)，著實(shí)讓我興奮，以前是用第三方的，這里主要說說Bundle技術(shù)。

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

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

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

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

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

后臺(tái)配置

　　MVC4在架構(gòu)上有些變動(dòng)，簡(jiǎn)化了原來的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ù)加載！

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

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

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

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

@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") ...
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @RenderSection("scripts", required: false) 

正則匹配需要的，過濾不需要的

復(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ù)器掛了或不能訪問了，這里就會(huì)選擇本地的資源文件，debug下mvc 會(huì)讓我們看到他原來的面具，這點(diǎn)非常好利于我們調(diào)試。　　
　　　