Asp.Net Mvc Bundle Kullanımı

Asp.Net Mvc de style ve javascript referanslarını eklemenin ve yönetimin en kolay olduğu yollardan birisi olan Bundle & Minification tekniğini ele alıyoruz.

Bundle Nedir

Öncelikle Bundle dediğimiz tekniği biraz anlamamız gerek. Web projelerimize bir style veya javascript referansı eklerken her sayfaya bunları tek tek <script> veya <style> etiketleriyle ekliyoruz.Fakat bu çok pratik değil ve yeni bir dosya eklendiğinde yönetimi zor.

Bunun için yeni bir bundle oluşturuyoruz. Örnek olarak "bundleCss" isimli oluşturduğumuz yığın içerisine örnek olarak 10 tane farklı css referans (path) ekliyoruz. Daha sonra view içerisinde Styles.Render("bundleCss") diyerek bizim eklediğimiz 10 dosyayı tek bir yerden çağırarak süper olayı tamamlıyoruz. (merak etmeyin örnek aşağıda)

Avantajları

• En önemli özelliği performansa etkisi. Siz normal bir sayfa açılışında 10 farklı js dosyası için 10 farklı request işlemi gerçekleştirirken bundle tekniği ile dosyalar "yığın" haline geliyor ve tek bir dosya olarak geriye döndürülüyor. 1 request işlemi gerçekleşiyor.
• Yine performansa diğer bir etki olarak bundle edilen tüm dosyaların minification işlemine tabii tutulması.Yani sıkıştırılmış ve boyutu düşürülmüş bir biçimde geriye döndürülüyor.
• En başta yönetimi kolay ve esnek.
• Bir çok bundle oluşturma.

Bundle Örnek

• Öncelikle App_Start klasörü içerisinde BundleConfig.cs dosyasını oluşturalım.
• Oluşturduktan sonra gerekli RegisterBundles methodunu ekliyoruz.Bu method üzerinden tüm işlemlerimizi gerçekleştireceğiz.
• Yukarıda koda dikkat ederseniz font-awesome.css referansını ekleme şeklim farklı.Bunun sebebi font-awesome'un kullandığı font dosyaları var ve bu dosyaların yolları font-awesome.css ile aynı yerde olduğu için yolu (path) ona göre belirtilmiştir. Fakat biz bundle kullandığımızda path değişeceği için bunu CssRewriteUrlTransform() ile urleri tekrar yazmasını zorluyoruz.
• En son satır Bundle'a eklenen dosyaların geriye sıkıştırılmış ve boyutu düşürülmüş bir şekilde tek dosya olarak dönebilmesi için EnableOptimizations=true dememiz gerekmekte.
• Bundle tanımlamaları bittikten sonra View tarafında render etmek ve global.asax dosyasında register işlemi yapacağız.

Bundle Örnek Proje

Artık blog üzerinden yazıyla aktardığım teknik , çözüm ve yolları github üzerinde Mvc Sample Project üzerinde toplayacağım. Bundle örneğinide bu proje üzerinden inceleyebilirsiniz ;

Github : Mvc Sample Project