【轉】在ASP.NET MVC中，使用Bundle來打包壓縮js和css

eedc發表於2016-11-20
ASP.NETMVCJSCSS

在ASP.NET MVC4中（在WebForm中應該也有），有一個叫做Bundle的東西，它用來將js和css進行壓縮（多個檔案可以打包成一個檔案），並且可以區分除錯和非除錯，在除錯時不進行壓縮，以原始方式顯示出來，以方便查詢問題。

具體優勢可自行百度或參看官方介紹：http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

這裡僅簡單記錄下如何使用。

首先，如果是使用的ASP.NET MVC4基本或者其他內容更豐富的模板，Bundle應該已經自動配置上了，因為本身會有jQuery和jQuery UI的引用，這兩項引用會用到Bundle。

就簡單說一下要點吧。

首先在專案的App_Start資料夾中，會有一個BundleConfig.cs檔案：

image

這裡面寫了所有需要Bundle的內容，可以自行設定：

image

其中的bundles.Add是在向網站的BundleTable中新增Bundle項，這裡主要有ScriptBundle和StyleBundle，分別用來壓縮指令碼和樣式表。用一個虛擬路徑來初始化Bundle的例項，這個路徑並不真實存在，然後在新Bundle的基礎上Include專案中的檔案進去。具體的Include語法可以查閱上面提供的官方簡介。

然後對Bundle的註冊是在專案根下的Global.asax檔案中，這個檔案中的Application_Start是網站程式的開始，裡面註冊了網站各種初始化的內容，其中就包括對BundleTable的Bundle新增：

image

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

BundleTable.EnableOptimizations = true;

如果將其設為false，那麼就會和下面說的debug=true時的情況相同了。

在使用時，在相應位置呼叫ScriptRender和StyleRender的Render方法：

image

終端使用者頁面即可達到效果打包壓縮效果。

有一個地方主要注意，在Web.config中，當compilation編譯的debug屬性設為true時，表示專案處於除錯模式，這時Bundle是不會將檔案進行打包壓縮的，頁面中引用的js和css會分散原樣的展示在html中，這樣做是為了除錯時查詢問題方便（壓縮以後就噁心了。。。）。

image

最終部署執行時，將debug設為false就可以看到js和css被打包和壓縮了。

=============

使用Bundle的關鍵在於要向ASP.NET中的BundleTable註冊Bundle。

如果要在ASP.NET WebForm中使用Bundle，需要在新建專案時選擇.NET Framework 4.5，最好使用模板網站新建，這樣就可以直接看到Bundle了。

 

BundleConfig.cs

 

using System.Web;
using System.Web.Optimization;

namespace Mvc5MobileApplication1
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.*"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui*"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

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

            bundles.Add(new StyleBundle("~/Content/mobilecss").Include("~/Content/jquery.mobile*"));

            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"));
        }
    }
}

 

Global.asax

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

namespace Mvc5MobileApplication1
{
    // Note: For instructions on enabling IIS6 or IIS7 classic mode, 
    // visit http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

 

_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <meta name="viewport" content="width=device-width" />
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        @Styles.Render("~/Content/mobileCss", "~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        <div data-role="page" data-theme="b">
            <div data-role="header">
                @if (IsSectionDefined("Header")) {
                    @RenderSection("Header")
                } else {
                    <h1>@ViewBag.Title</h1>
                    @Html.Partial("_LoginPartial")
                }
            </div>
            <div data-role="content">
                @RenderBody()
            </div>
        </div>

        @Scripts.Render("~/bundles/jquery")
        <script>
            $(document).on("mobileinit", function () {
                $.mobile.ajaxEnabled = false;
            });
        </script>
        @Scripts.Render("~/bundles/jquerymobile")
        @RenderSection("scripts", required: false)
    </body>
</html>

 

相關文章