Asp.net MVC下使用Bundle合并、壓縮js與css文件詳解
前言
介紹本文的正式內(nèi)容之前先引用《淘寶技術(shù)這十年》中一段話,對Web前端稍微有點常識的人都應(yīng)該知道,瀏覽器下一步會加載頁面中用到的CSS、JS(JavaScript)、圖片等樣式、腳本和資源文件。但是可能相對較少的人才會知道,你的瀏覽器在同一個域名下并發(fā)加載的資源數(shù)量是有限的,例如IE 6和IE 7是兩個,IE 8是6個,chrome各版本不大一樣,一般是4~6個。Bundle是ASP.NET 4.5中的一個新特性,可 用來將js和css進行壓縮(多個文件可以打包成一個文件,也可以說是合并多個文件),并且可以區(qū)分調(diào)試和非調(diào)試,在調(diào)試時不進行壓縮,以原始方式顯示出來,以方便查找問題。下面話不多說,來看看詳細的介紹吧。
一個例子
新建asp.net mvc項目,在App_Start文件夾中你可以看到一個叫做BundleConfig.cs的類,

該類內(nèi)容如下:
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/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 ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
}
}
如上代碼所示,壓縮和合并分兩種對象ScriptBundle和StyleBundle。
namespace System.Web.Optimization
{
//
// Summary:
// Represents a bundle that does Js Minification.
public class ScriptBundle : Bundle
{
//
// Summary:
// Initializes a new instance of the System.Web.Optimization.ScriptBundle class
// that takes a virtual path for the bundle.
//
// Parameters:
// virtualPath:
// The virtual path for the bundle.
public ScriptBundle(string virtualPath);
//
// Summary:
// Initializes a new instance of the System.Web.Optimization.ScriptBundle class
// that takes virtual path and cdnPath for the bundle.
//
// Parameters:
// virtualPath:
// The virtual path for the bundle.
//
// cdnPath:
// The path of a Content Delivery Network (CDN).
public ScriptBundle(string virtualPath, string cdnPath);
}
}
ScriptBundle有兩個構(gòu)造函數(shù),virtualPath:js文件的虛擬路徑,cdnPath:js的網(wǎng)絡(luò)cdn路徑。StyleBundle的構(gòu)造函數(shù)的參數(shù)與ScriptBundle相同。
在上面的代碼片段中你可以看到
- jquery-{version}.js:其中version是jquery的版本號,version是一個版本號的占位符。
- jquery.validate*:*通配符,匹配所有。
上面的代碼完成后,需要在Global.asax的Application_start事件中對其注冊。

如何使用?
在視圖中,通過下面的代碼實現(xiàn)對靜態(tài)文件的引用。

瀏覽

怎么沒起作用呢?Bundle默認在調(diào)試的情況下,是沒有開啟打包壓縮的,可以通過下面的2中方式進行開啟。

再瀏覽下

你會發(fā)現(xiàn)Jquery-1.10.2.js該文件在請求中已經(jīng)不存在了,它已經(jīng)被打包壓縮在jquery?v=版本號,這個文件里面了。
另外一種打開打包壓縮的方式,在web.config文件中中:

總結(jié)
上面就是對Bundle的用法介紹,對靜態(tài)文件打包壓縮可以減少請求次數(shù),資源加載的速度。希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
asp.net中js和jquery調(diào)用ashx的不同方法分享
asp.net中js和jquery調(diào)用ashx的不同方法分享,需要的朋友可以參考一下2013-06-06
asp.net+Ajax校驗用戶是否存在的實現(xiàn)代碼
主要技術(shù)點 jquery ajax以及blur事件,當用戶名輸入框失去焦點的時候就會觸發(fā)blur事件,然后進行ajax請求,獲得結(jié)果(true或者false),如果請求結(jié)果為true,就把用戶名輸入框圖片替換成ok,并且輸出文字:恭喜您2012-05-05
ASP.NET實現(xiàn)讀取Excel內(nèi)容并在Web上顯示
這篇文章主要介紹了ASP.NET實現(xiàn)讀取Excel內(nèi)容并在Web上顯示,很實用的一個技巧,需要的朋友可以參考下2014-08-08
VS2010/VS2013項目創(chuàng)建 ADO.NET連接mysql/sql server詳細步驟
這篇文章主要介紹了VS2010/VS2013項目創(chuàng)建,及ADO.NET連接mysql/sql server詳細步驟,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10
在ASP.NET中用MSDNURLRewriting實現(xiàn)Url Rewriting
在ASP.NET中用MSDNURLRewriting實現(xiàn)Url Rewriting...2007-03-03

