ASP.NET MVC’de Bundling ve Minification

Asp.Net MVC’de bu makalemde Bundling ve Minification ‘dan bahsedeceğim.Web sayfalarımızda script ve css kütüphanelerini import ederiz.Scriptleri ,css dosyalarını da elementleri ile sayfaya ekleriz.Şimdi Asp.Net MVC’de bu tanımlamarı BundleConfig ile yapmaya çalışacağız.Öncelikle sayfamıza şu şekilde script ve css kütüphanelerini eklediğimizi varsayalım:

<link href="@Url.Content("~/Scripts/jquery-ui-1.11.4.custom/jquery-ui.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.11.4.custom/external/jquery/jquery.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.11.4.custom/jquery-ui.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

Şimdi,App_Start klasörü altında oluşturduğumuz BundleConfig sınıfını oluşturalım ve içerisini şu şekilde dolduralım:Script kütüphanelerini ScriptBundle ile ,css kütüphanelerini StyleBundle ile tanımlıyoruz.

using System.Web.Optimization;

namespace Mvc4Application1.App_Start
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-ui-1.11.4.custom/external/jquery/jquery.js"));

            bundles.Add(new ScriptBundle("~/bundles/jquery-validate")
                .Include("~/Scripts/jquery.unobtrusive-ajax.min.js")
                .Include("~/Scripts/jquery.validate.min.js")
                .Include("~/Scripts/jquery.validate.unobtrusive.js")
                );
            bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include("~/Scripts/jquery-ui-1.11.4.custom/jquery-ui.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Scripts/jquery-ui-1.11.4.custom/jquery-ui.css"));

           BundleTable.EnableOptimizations = true; 
        }
    }
}

Yukarıda bundle tanımlamarı yaptık.ikinci bundle “Scripts” dizini içerisindeki üç script kütüphanesini tek bundleda toplayacak şekilde yazılmıştır.Son sıradaki BundleTable.EnableOptimizations kodu bundle örneklerini tek dosya halinde toplayıp içerisindeki gereksiz satırları (yorum satırları, boşluklar, yeni satırlar, vb. ) atıp, değişken isimlerini kısaltıp yani script veya stil dosyamızı optimize edip istemciye gönderilecek dosya boyutunu ve talep sayısını azaltıyor.Yani minification işlemini yapmaktadır.

Bu işlemlerden sonra Global.asax dosyasında Application_Start methodunda BundleConfig.RegisterBundles(BundleTable.Bundles); kodunu ekliyoruz.

using System.Web.Optimization;
protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);

            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

Bu işlemlerden sonra sayfamıza eklediğimiz kütüphaneleri şu şekilde çağırabiliyor olacağız.

     @Scripts.Render("~/bundles/jquery")
     @Scripts.Render("~/bundles/jquery-validate")
     @Scripts.Render("~/bundles/jquery-ui")
     @Styles.Render("~/Content/css")

Eğer bu adımdan sonra şu hatayı alıyorsanız:

'WebGrease, Version=1.5.1.25624, Culture=neutral, PublicKeyToken=31bf3856ad364e35' dosyasını veya derlemesini ya da bağımlılıklarından birini yükleyemedi. Sistem belirtilen dosyayı bulamıyor.

Bu hata işe karşılaşıyorsanız eğer ,

1)Öncelikle WebGrease.dll’i reference olarak projenize ekleyiniz.

2)Aşağıdaki kodları web.config dosyanıza ekleyiniz.

<runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-1.5.2.14234" newVersion="1.5.2.14234" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>

Sonuç olarak yazdığımız bundleları minification yapılmış halde sayfa kaynağında şu şekilde görüntülüyor olacağız.

   <script src="/bundles/jquery?v=yLrUYw8wJsDVphfZd34hBbV8EDUqbXgqcJTvyPCUCRg1"></script>

   <script src="/bundles/jquery-validate?v=rGUXtQZ2M3lKI1DIPIHwqLsySxI_juPKFAqq1PlnVFs1"></script>

   <script src="/bundles/jquery-ui?v=6_R3XtK5S6lnGbFIQcKBAAjuihn8PftKzS7H_pAnUMg1"></script>

   <link href="/Content/css?v=46CkXt7BXGmufoUdkXqbJu_AjN76xHNeHWhMxIq2OxE1" rel="stylesheet"/>