MVC'de BundleConfig Kullanımı

Merhaba arkadaşlar, bu yazımızda web projelerinde en çok sıkıntı yaşadığımız css ve js dosyalarını nasıl optimize edeceğimize bakacağız.

Bu optimizasyonu MVC projelerinde bundle config sınıfımızda sağlayacağız.
Visual Studio 2017 ile MVC Empty proje açtığımızda varsayılan olarak gelmemektedir. Bu sebepten dolayı kendimiz oluşturmamız gerekmektedir.

Aşağıdaki adımları takip ederek, projenizdeki css ve js dosyalarını optimize edebilirsiniz.

1- Tools > NugetPackageManager > Package Manager Console
üzerinden
Install-Package Microsoft.AspNet.Web.Optimization
ile eklentiyi yüklüyoruz.

2- AppStart klasörü altına BundleConfig.cs adında yeni bir sınıf (class) ekliyoruz.

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
           
    }
}

3- BundleConfig sınıfımızı oluşturduğumuza göre MVC yi Bundling yapısından haberdar etmek için,
Global.asax dosyası içeriğine aşağıdaki kod satırını ekliyoruz.
Global.asax dosyasının NameSpace olarak using System.Web.Optimization ve BundleConfig.cs i içeren App_Start ‘ı görmesi gerekiyor.

protected void Application_Start()
{            
    AreaRegistration.RegisterAllAreas(); 
    RouteConfig.RegisterRoutes(RouteTable.Routes); 
    BundleConfig.RegisterBundles(BundleTable.Bundles); 
}

4- Views/web.Config içindeki namespaces içerisine ekliyoruz.


 < add namespace="System.Web.Optimization" />

5- Dosya yollarını belirtmek için


public static void RegisterBundles(BundleCollection bundles)
 {            
     BundleTable.EnableOptimizations = true;
     
     // ScriptBundle parametre olarak virtualDirectory yolu ister
     // ~/ ile başlayıp oluşturulacak yolu belirliyoruz. ~/bundles/jquery 
     // Include metodu ile belirlenen virtualDirectory içerisine dosya eklenir.
            bundles.Add(new ScriptBundle("~/bundles/jquery")
                .Include("~/plugins/jquery/jquery.min.js",
                         "~/plugins/bootstrap/js/bootstrap.bundle.min.js", 
                         "~/dist/js/adminlte.min.js"));

            bundles.Add(new StyleBundle("~/bundles/css")
                .Include("~/plugins/font-awesome/css/font-awesome.min.css",
                         "~/dist/css/adminlte.min.css"));
 }

6- Kullanımı :
.cshtml sayfanızda
css dosyalarının olması gereken yere @Styles.Render("~/bundles/css") ekleyiniz. (genellikle head etiketi arasında)
js dosyalarının olması gereken yere @Scripts.Render("~/bundles/jquery") ekleyiniz. (genellikle sayfanın sonunda)

Erdi YALÇIN

MVC'de BundleConfig Kullanımı