一、簡述
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
?