一、簡述

　　Bundle，英文原意就是捆、收集、歸攏。在MVC中的Bundle技術，也就是一個對css和js文件的捆綁壓縮的技術。

　　它的用處：

　　將多個請求捆綁為一個請求，減少服務器請求數

　　壓縮javascript，css等資源文件，減小網絡帶寬，提升性能

?

　　使用Bundle技術，并且擁有緩存功能，同時也可以對資源文件進行一定的模塊化管理，可使用正則對需要的文件進行過濾匹配，也可以使用cdn文件

?

二、技術詳解

1.怎么開啟bundle

在項目的App_Start文件夾中，會有一個BundleConfig.cs文件；

public class BundleConfig{// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862public 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*"));// 使用要用于開發和學習的 Modernizr 的開發版本。然后，當你做好// ready for production, use the build tool at https://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"));BundleTable.EnableOptimizations = true; //是否打包壓縮 }}

對Bundle的注冊是在項目根下的Global.asax文件中，這個文件中的Application_Start是網站程序的開始，里面注冊了網站各種初始化的內容，其中就包括對BundleTable的Bundle添加：BundleConfig.RegisterBundles(BundleTable.Bundles);

默認情況下，Bundle是會對js和css進行壓縮打包的，不過有一個屬性可以顯式的說明是否需要打包壓縮。

BundleTable.EnableOptimizations = true;

配置web.config，關掉調試狀態，否則不會進行壓縮。

<system.web><compilation debug="false" targetFramework="4.5.2" /></system.web>

2.如何使用

視圖中調用方法：

????@Styles.Render("~/Content/css")

????@Scripts.Render("~/bundles/bootstrap")

捆綁框架如以下幾個共同的約定：

• 如果“FileX.min.js”和“FileX.js”都存在，請為發行版選擇“.min”文件。
• 選擇用于調試的非".min"版本。
• 忽略"-vsdoc"僅使用智能感知的文件 （如 jquery-1.7.1-vsdoc.js）。

如上所示的{version}通配符匹配用于自動創建一個 jQuery 束具有適當版本的 jQuery腳本文件夾中。在此示例中，使用通配符提供了以下好處：

• 允許您使用 NuGet 更新到新的 jQuery 版本而無需更改前面的綁定代碼或 jQuery 引用在您查看網頁。
• 自動選擇完整版，為調試配置和發布的".min"版本生成。

3.使用 CDN

以下代碼將使用 CDN jQuery 綁定來替換本地 jQuery 綁定。

public static void RegisterBundles(BundleCollection bundles) {bundles.UseCdn = true; //enable CDN support//add link to jquery on the CDNvar jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";bundles.Add(new ScriptBundle("~/bundles/jquery",jqueryCdnPath).Include("~/Scripts/jquery-{version}.js")); }

在上面的代碼中，jQuery 將請求從 CDN 雖然在釋放模式和 jQuery 的調試版本將被回遷本地在調試模式下。當使用 CDN，你應該有一個回退機制在 CDN 請求失敗的情況下。下面的標記片段從布局文件的末尾顯示腳本添加請求 jQuery 應 CDN 失敗。

@Scripts.Render("~/bundles/jquery")<script type="text/javascript">if (typeof jQuery == 'undefined') {var e = document.createElement('script');e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';e.type = 'text/javascript';document.getElementsByTagName("head")[0].appendChild(e);}</script> @RenderSection("scripts", required: false)

?

三、常見問題

1. css中引用的圖片路徑出現錯誤?

在css中，圖片路徑一般都是寫相對路徑，使用bundle后出現錯誤。處理方法：通過?new CssRewriteUrlTransform() 來解決

bundles.Add(new StyleBundle("~/Content/login").Include("~/Content/login.css", new CssRewriteUrlTransform()));

2. css中使用@Import "base.css" 找不到對應的文件

解決：修改為?@import url("base.css");

import的相關文章：https://segmentfault.com/a/1190000000369549

?

3.JS智能感知

?重點就是最下面的一條：~/Scripts/_references.js，這個就是默認的自定義公共js智能感知引用文件

詳細看https://www.cnblogs.com/zuqing/p/4862142.html

?

?

參考：

http://blog.csdn.net/zhou44129879/article/details/16818987

http://www.cnblogs.com/weishao/archive/2013/04/12/3015005.html

?

總結

以上是生活随笔為你收集整理的第五章 MVC之Bundle详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。