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)文章
使用visual studio自動創(chuàng)建IIS虛擬目錄
使用visual studio自動創(chuàng)建IIS虛擬目錄,需要的朋友可以參考一下2013-02-02
詳解ASP.NET MVC下的異步Action的定義和執(zhí)行原理
這篇文章主要介紹了詳解ASP.NET MVC下的異步Action的定義和執(zhí)行原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
asp.net 獲取目錄下的文件數(shù)和文件夾數(shù)
遍歷一個文件夾中的文件,需要用到DirectoryInfo類中的一個重要的方法GetFileSystemInfos(),此方法返回指定的是與搜索條件相匹配的文件和子目錄的強類型 FileSystemInfo對象的數(shù)組。2010-07-07
asp.net CheckBoxList各項最小寬度CSS樣式(兼容性good)
ASP.NET中,CheckBoxList里的選擇都是自動寬度的,屬性時沒有設(shè)置各項寬度的設(shè)置,在IE10、遨游4極速模式及兼容模式下均可正確顯示最小寬度,此樣式除了用于CheckBoxList外,也可用于DIV等2013-04-04
asp.net使用jquery實現(xiàn)搜索框默認提示功能
這篇文章主要介紹了asp.net使用jquery實現(xiàn)搜索框默認提示功能,大家參考使用吧2014-01-01
VS2012/VS2013本地發(fā)布網(wǎng)站問題集錦(HTTP錯誤代碼)
這篇文章主要為大家詳細介紹了VS2012/VS2013本地發(fā)布網(wǎng)站遇到問題,HTTP錯誤代碼的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-04-04
ASP.NET?MVC5網(wǎng)站開發(fā)顯示文章列表(九)
顯示文章列表分兩塊,管理員可以顯示全部文章列表,一般用戶只顯示自己的文章列表。文章列表的顯示采用easyui-datagrid,后臺需要與之對應(yīng)的action返回json類型數(shù)據(jù),感興趣的小伙伴們可以參考一下2015-09-09
the sourcesafe database has been locked by the administrator
今天早上打開soucesafe的時候出現(xiàn)提示:“the sourcesafe database has been locked by the administrator"。仔細想想, 可能是前天晚上用"f:\analyze.exe" -I- -DB -F -V3 -D "f:\vssData\data" 命今分析的時候鎖定了database2009-04-04

