快捷導(dǎo)航

ASP.NET MVC 4 捆綁和縮小實(shí)例介紹

更新時(shí)間：2013年06月12日 14:42:00 作者：

在 ASP.NET MVC 4 中可捆綁多個(gè) css 和 js 文件以減少HTTP請(qǐng)求，并對(duì) css 和 js 文件進(jìn)行壓縮（縮?。?，這樣可提高網(wǎng)站的加載速度

在 ASP.NET MVC 4 中可捆綁多個(gè) css 和 js 文件以減少HTTP請(qǐng)求，并對(duì) css 和 js 文件進(jìn)行壓縮（縮?。?，這樣可提高網(wǎng)站的加載速度。我們選取博客園的 css 文件來看看，在 ASP.NET MVC 4 前，我們引入 css 方法如下：

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

 
<link href="/Content/Site.css" rel="stylesheet" type="text/css" /> 
<link href="/Content/sitehome.css" rel="stylesheet" type="text/css" /> 

在 IE 中使用 F12 查看結(jié)果，如圖：

mvc 4 捆綁前

在 ASP.NET MVC 4 中，使用下邊寫法引入 css 文件：

<link href="/Content/css" rel="stylesheet" />

重新運(yùn)行，結(jié)果如下：

mvc 4 捆綁后

可以清楚的看到，在 ASP.NET MVC 4 中使用新方法引入 css 時(shí)，網(wǎng)站運(yùn)行時(shí)不僅合并了 css 文件而且壓縮了 css 中的代碼。雙擊 css 文件，在響應(yīng)正文中可以看到：

asp.net mvc 4 縮小

對(duì) js 文件的處理方式同 css 相同，引入方法如下：

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

ASP.NET MVC 4 中捆綁時(shí)，css 排序規(guī)則為：先加載 reset.css、normalize.css，其他文件按首字母排序，類似地 js 排序規(guī)則為 jquery.js、jquery-ui.js 其他文件同樣按首字母排序。有時(shí)我們需要在不同頁面加載不同的 css 或 js 文件，以減少不必要的文件，下邊就讓我們看看怎么自定義一個(gè)捆綁。

在 Global.asax.cs 文件 Application_Start() 中添加如下代碼：

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

 
//定義名為"mycss"的捆綁,js對(duì)應(yīng)為 new JsMinify() 
var b = new Bundle("~/mycss", new CssMinify()); 
//添加Content文件夾下的所有css文件到捆綁 
//第三個(gè)參數(shù)false表示，Content文件夾下的子文件夾下不添加到捆綁 
b.AddDirectory("~/Content", "*.css", false); 
//添加到BundleTable 
BundleTable.Bundles.Add(b); 

這樣在需要使用的頁面，加入下邊的代碼即可：

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

總結(jié)：ASP.NET MVC 4 捆綁和縮小功能，使得減少 http 請(qǐng)求和壓縮 js、css 文件變得非常簡(jiǎn)單，這樣不需要我們手動(dòng)來合并 js、css 文件，也不需要使用工具來壓縮這些文件，使得 js、css 文件的管理變得簡(jiǎn)單，易于維護(hù)，從而將我們從重復(fù)的工作中解脫出來。

作者：東奎

您可能感興趣的文章: