MVC BundleConfig Kullanımı ve Performans Sonucu

Mvc BundleConfig

1.696

Bu yazımızda MVC BundleConfig nedir , BundleConfig kullanımı ve performans sonuçları başlıklarını inceleyeceğiz. Web uygulamaları geliştirirken script, css dosyalarını kullanmamak olmaz. Hatta bazı durumlarda kullanılan dosyalar o kadar fazla oluyor ki neyin ne olduğunu anlamak bile zaman alabiliyor, bir süre sonra ihtiyaç duyulmasa bile sayfada gereksiz script veya style dosyalarının çağrıldığını bile görebiliyoruz. Bu istenmeyen durumlardan kaçınma , performans artışı optimizasyon işlemlerimizi BundleConfig ile yapabiliyoruz.

BundleConfig Nedir ?

Framework 4.5 ile gelen Bundling yapısı projemizde kullanılan script ve style dosyalarının tek elden yönetimini sağlar.  Eklenen dosyalar üzerinde optimizasyon yapar ve dosya boyutunu olabildiğince azaltır. Bu işlem için değişken isimleri minimum uzunluğa çekilir , boş satırlar ve boşluklar silinir. Sunucu üzerinden request edilen gereksinimler azaldığından sitemiz daha hızlı çalışır. Aynı zamanda eklediğimiz dosyaların versiyon bağımsız halde işlememize olanak sağlar.  Kısaca Bundling düzenli ve optimize kod yazmamız için gerekli bir yapıdır.

BundleConfig Kullanımı ?

MVC üzerinde BundleConfig yapısının hazır olarak sunulduğu şablonlar mevcut. Yapıyı ve kullanımını daha iyi anlamak için MVC boş şablon ile örneğimize başlıyoruz.

Öncelikle projemizde optimizasyon kullanabilmek için Nuget üzerinden Optimizasyon kütüphanesini eklememiz gerekiyor.  Tools > NugetPackageManager > Package Manager Console üzerinden Install-Package Microsoft.AspNet.Web.Optimization  ile eklentiyi yüklüyoruz.  AppStart klasörü altına BunleConfig.cs adında yeni bir sınıf ekleyip parametre olarak BunleCollection alan static RegisterBundles metodumuzu ekliyoruz

BundleConfig sınıfımızı oluşturduğumuza göre MVC yi Bundling yapısından haberdar etmemiz gerekiyor. 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.

Son olarak web.Config içerisinde view da kullanılacak namespace’lerin altına bir yenisini eklememiz gerekiyor. Bu eklemeyi yapmazsak View üzerinde Bundle’ları render etmek istediğimizde her view’a using System.Web.Optimization namespace’ini eklememiz gerekecek.

Tüm ayarlarımızı tamamladığımıza göre daha önce hazırladığımız BundleConfig sınıfımızdaki RegisterBundles metodumuzun içeriğini oluşturabiliriz.

BundleConfig RegisterBundles metoduna geçmeden önce aşağıdaki bilgileri eklemekte fayda var.

ScriptBundle > script (js) dosyalarımızın bundling işlemi için kullanılır.
StyleBundle  > style (css) dosyalarımızın bundling işlemi için kullanılır.

♦ Standart Ekleme

Kullanacağımız dosyaları tek tek ekleriz. Belirlediğimiz VirtualDirectory üzerine birden fazla dosya eklemesi yapabiliriz.

♦ Versiyon bağımsız (Wildcard)

Eklediğimiz dosyalarda versiyon değişimi olduğunda link verilen dosyayı da değiştirmemiz gerekir. Bu tür senaryolarda problem yaşamamak için script dosyalarımızı versiyon bağımsız olarak ekleyebiliriz. Bu şekilde versiyon değişse bile kod üzerinden düzenleme yapmamıza gerek kalmayacaktır.

Klasör içerisindeki seçilen dosyaları ekleme (Wildcard Selected File)

Şu ana kadar dosyaları tek tek ekliyorduk. Çoğunlukla script ve css dosyalarımız aynı klasör içerisinde olur. O halde hepsini yazmaktansa direk klasör olarak ekleme yöntemini seçebiliriz. IncludeDirectory metodunu kullanarak çeşitli patentler ile ekleme işlemini yapabiliyoruz.

Örneğimize kaldığımız yerden devam edelim. RegisterBundles metodumuzu hazırlayalim.

Oluşturduğumuz BundleCollection’ ın  view üzerinde render edilmesi gerekiyor. Bu işlemle script ve style dosyalarımızı oluşturduğumuz bundle virtual directory üzrinden sayfamıza render edeceğiz.

 

BundleConfig Optimizasyonu sonucu

Yukarıda bahsettiğim gibi BundleTable.EnableOptimizations = true kodu ile dosyalarımız üzerinde bazı değişiklikler yapılmaktaydı. Aşağıda paylaştığım görsellerde aynı script ve style dosyalarının BundleConfig ve layout üzerine direk link vererek çalıştırıp aldığım sonuçları görebilirsiniz.

  • js , css dosyaları link olarak layout üzerine eklendi.
MVC BundleConfig
MVC Bundling
  • js , css dosyaları BundleConfig üzerinden View da render edildi.
BundleConfigMVC Bundling

Referans

msdn_bundling-and-minification

 

H.Burak Karadağ

Yorum yaz

Email adresiniz yayınlanmayacaktır.