我們在WEB開發使用的開發語言多種多樣，今天為大家介紹的是ASP.NET MVC下Bundle，它可以將js和css進行壓縮，下面就讓錯新技術頻道小編帶大家細細了解吧！

ASP.NET MVC中Bundle是用于打包捆綁資源的（一般是css和js），它是在全局文件Global.asax.cs中注冊Bundle，而注冊的具體實現默認是在App_Start文件夾的BundleConfig.cs中

public class MvcApplication : System.Web.HttpApplication{ protected void Application_Start() {  AreaRegistration.RegisterAllAreas();  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);  RouteConfig.RegisterRoutes(RouteTable.Routes);  BundleConfig.RegisterBundles(BundleTable.Bundles); }}

BundleConfig.RegisterBundles(BundleTable.Bundles); 在應用程序啟用時注冊Bundle

public class BundleConfig{ // 有關綁定的詳細信息，請訪問 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*"));  // 使用要用于開發和學習的 Modernizr 的開發版本。然后，當你做好  // 生產準備時，請使用 http://modernizr.com 上的生成工具來僅選擇所需的測試。  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")); }}

為了便于說明，這里在HomeController下新建一個Action，如下：

public ActionResult BundleTest(){ return View();}

這里以使用Bootstrap為例，在視圖中使用@Styles.Render() 和@Scripts.Render() 引入css和js，參數是在BundleConfig注冊的名稱

@{ Layout = null;}

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

@Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")

瀏覽頁面，查看源代碼，可以看到：

bundles.Add(new StyleBundle("~/Content/css").Include(      "~/Content/bootstrap.css",      "~/Content/site.css")); 

由于在BundleConfig.cs中注冊上面的Bundle，@Styles.Render("~/Content/css")渲染時是引入~/Content/bootstrap.css和~/Content/site.css，js的渲染同理
為了驗證是否真正引入了BootStrap的css與js資源，這里添加了一些簡單的BootStrap示例代碼，如下：

@{ Layout = null;}

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

@Scripts.Render("~/bundles/jquery", "~/bundles/bootstrap")

前臺瀏覽看效果（當瀏覽器足夠大時是橫向平鋪的，如果將瀏覽器縮小，則是垂直平鋪，示例中的表單部分最能體現出來）：

改進

上面的Bundle是引入了未壓縮的css和js資源，但在實際應用中，出于為了減輕服務器負載等原因，需要引入壓縮版的資源(一般是在未壓縮的命名后面加上min來命名，如jquery.js的壓縮版【有些叫法是精簡版】是jquery.min.js)
于是修改BundleConfig.cs

重新編譯，再次瀏覽剛才的頁面，這時發現引入了壓縮版的資源(css/js)

注：由于示例時使用了ASP.NET MVC 5( .Net Framework 4.5)，而在.net framework 4中的asp.net mvc 4可能會有下面的情況：

在頁面查看源代碼時發現腳本缺少引入~/Scripts/bootstrap.min.js，這是asp.net mvc 4使用的System.Web.Optimization.dll默認使用了忽略規則*.min.js，這時可以在BundleConfig.cs的RegisterBundles中清除忽略規則

該解決方法一是通過反編譯System.Web.Optimization.dll并結合反編譯的代碼得出來的，另外也可以參考這個鏈接

另外就是在部署生產環境時發現無效，因為生產環境不再是debug模式，此時需要設置：

本文是錯新技術頻道小編為大家帶來的詳解ASP.NET MVC下Bundle的使用方法，大家要經常溫習哦，錯新技術頻道小編的介紹都是很清晰整潔的，對初學者有巨大的幫助。