LiuLyndon Look For: [MVC] Bundling and Minification

Bundling and Minification

主要減少請求載入時間
Bundling

將多個 JavaScript / CSS 檔案打包成一個，HTTP 請求時將只會收到一個檔案

Minification

移除程式中部必要的字元

下列為由空專案設定 Bundling and Minification 的流程

Step 1. 建立 MVC 空專案

Step 2. 安裝 Microsoft.AspNet.Web.Optimization

Step 3. App_Start 加入 BundleConfig.cs 並撰寫需要打包的檔案

查看 Content 與 Scripts 裡需要進行 Bundling and Minification
jquery
jquery-ui
jquery.validate
bootstrap
modernizr (Modernizr是一套JavaScript 函式庫，用來偵測瀏覽器是否支援HTML5與CSS3等規格。如果瀏覽器不支援，Modernizr會使用其他的解決方法來進行模擬。)
respond (用於為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供多媒體查詢的 min-width 和 max-width 特性，實現響應式網頁設計)

ScriptBundle 為 JavaScript / StyleBundle 為 CSS


using System.Web.Optimization;

namespace MVCDemo
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            // JavaScript
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

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

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

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                        "~/Scripts/bootstrap.js",
                        "~/Scripts/respond.js"));
            // CSS
            bundles.Add(new StyleBundle("~/Content/jquerycss").Include(
                        "~/Content/themes/base/all.css"));

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

        }
    }
}

Step 4. Global.asax 中 Application_Start 事件註冊


using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;

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

Step 5. Views 目錄中 web.config 加入 System.Web.Optimization


     <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="MVCDemo" />
     </namespaces>

Step 6. 引用 Styles 與 Scripts

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @Styles.Render("~/Content/jquerycss")
    @Styles.Render("~/Content/bootstrapcss")
</head>
<body>
    <div> 
    </div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")
</body>
</html>

通常位置會放至在 _Layout.cshtml

Step 7. 檔案都有幫忙打包載入，但並沒有幫忙壓縮使得檔案還一個一個的載入

需將除錯模式關閉 Root 中 web.config


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

REF：

恆逸

LiuLyndon Look For

2017年9月16日星期六

[MVC] Bundling and Minification

沒有留言:

張貼留言

2017年9月16日 星期六

[MVC] Bundling and Minification

沒有留言:

張貼留言

2017年9月16日星期六