JS及CSS打包壓縮功能.

.NET   ASP.NET  

▌背景

---

最近又開始學習一些前端的開發技術，有一年多的時間幾乎都沒碰前端了，因此將一些小技巧重新記錄下來。 這一篇是關於如何打包壓縮js/css檔，提升使用者的體驗。

▌環境

---

l   Windows 7 pro l   Visual Studio 2012 (C#) l   jQuery 1.9.1 l   Bootstrap v3.3.4

▌實作

---

▋壓縮打包

l   App_Start : BundleConfig

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"));             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-*"));             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/bootstrap").Include(                       "~/Scripts/bootstrap.js"));             bundles.Add(new StyleBundle("~/Content/css").Include(                       "~/Content/bootstrap.css"                       ));             bundles.Add(new ScriptBundle("~/bundles/angular").Include(                    "~/Scripts/angular.js",                    "~/Scripts/angular-ui/ui-bootstrap.js",                    "~/Scripts/angular-ui/ui-bootstrap-tpls.js"));         }

l   開啟壓縮打包功能 方法一：關閉WebConfig的Debug模式

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

開啟壓縮打包功能 方法二：在RegisterBundles方法內加入以下程式碼。

public static void RegisterBundles(BundleCollection bundles) {      // ...      BundleTable.EnableOptimizations = true; }

▋在頁面上宣告要載入的打包群組

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

▋Reference

l   ASP.NET MVC 4 RC的JS/CSS打包壓縮功能 (黑大)

l   Bundling and Minification