Asp.Net MVC4 BundleConfig文件合併、壓縮，網站優化加速 Asp.Net MVC4 BundleConfig文件合併、壓縮，網站優化加速 瀏覽器在向伺服器發送請求的時候，請求的文件鏈接數量是有限制的，如果頁面文件少就沒有什麼問題了，如果文件太多就會導致鏈接失敗等等問題。針對這個 ...
Asp.Net MVC4 BundleConfig文件合併、壓縮，網站優化加速
瀏覽器在向伺服器發送請求的時候，請求的文件鏈接數量是有限制的，如果頁面文件少就沒有什麼問題了，如果文件太多就會導致鏈接失敗等等問題。針對這個問題MVC4中增加了新功能：BundleConfig.cs，使用BundleConfig可以將多個文件請求和併成一個請求，去除文件中的一些註釋、空白、壓縮文件的大小，自動合併壓縮優化代碼，縮短響應時間，提高網頁速度，起到優化網站的作用。
具體使用方法
1、註冊BundleConfig
在global.asax文件中的Application_Start()方法中添加以下代碼
| 1 |
BundleConfig.RegisterBundles(BundleTable.Bundles);
|
2、創建分組文件
打開：App_Start/BundleConfig.cs 文件，裡面有些系統預設的方法（如果是自己創建的文件是沒有的，可以通過創建一個非空的MVC項目來查看）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
public class BundleConfig
{
// 有關 Bundling 的詳細信息，請訪問 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"));
//JS文件
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
// 使用 Modernizr 的開發版本進行開發和瞭解信息。然後，當你做好
// 生產準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
//CSS文件
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"));
}
}
|
代碼解釋：
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js"));
"~/bundles/jquery" ：表示分組的文件路徑（也就是產生一個虛擬的文件夾）。
"~/Scripts/jquery-{version}.js" ：表示該分組包含的具體文件，是項目實際存在的文件。如果有多個文件參考代碼中下麵的寫法。 {version}參數代表版本號 ,*代表所有，這兩個是可以理解為通配符。
代碼中的其它幾個add意思是一樣的。根據不同的文件類型等創建不同的分組，比如js文件創建一個分組，css創建一個分組等。
3、使用分組
在視圖頁面添加代碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<!--Style 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Styles.Render("~/Content/css")
<!--JavaScript 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
<!--JavaScript 分組代碼調用 名稱就是定義的分組文件名稱 -->
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
|
代碼解釋：
| 1 |
@Scripts.Render("~/bundles/jquery")
|
其中的“~/bundles/jquery” 是上面定義的文件分組名稱
4、合併頁面請求
接下來我們通過分組將請求多個文件合併成請求一個，可以使用如下兩種方法來實現：
-
將web.config中的編譯調試debug設為false <compilation debug="false" targetFramework="4.5"/>
-
在BundleConfig中的方法末尾添加 BundleTable.EnableOptimizations = true; （建議使用這個方法），
配置完成以後刷新頁面，就可以看到 ：
src="/bundles/jquery?v=wBUqTIMTmGl9Hj0haQMeRbd8CoM3UaGnAwp4uDEKfnM1"
解釋：?前面是分組名稱，後面是多個文件合併後生成的哈希碼
可以要通過火狐的firebug或者是谷歌瀏覽器查看合併前後的效果，看著載入文件數量和載入速度還是有很大提升的。
5、其它註意事項
1、使用中註意區分Js和css文件，產生分組的方法和前臺調用的方法名稱都是不一樣的，詳細請看上面的代碼
2、預設情況下BundleTable.Bundles會過濾掉尾碼名為這些的文件：
,intellisense.js、-vsdoc.js、.debug.js、.min.js、.min.css,
當載入尾碼名為這些的文件，將顯示空白。可以用如下方法去除對這些文件過濾限制
| 1 2 3 4 |
BundleTable.Bundles.IgnoreList.Clear();
BundleTable.Bundles.IgnoreList.Ignore(".min.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore("-vsdoc.js", OptimizationMode.Always);
//BundleTable.Bundles.IgnoreList.Ignore(".debug.js", OptimizationMode.Always);
|
如果提示：未能載入 WebGrease.dll ，請查看這裡：http://ityouzi.com/archives/mvc-webgrease-error.html
