IBundleOrderer İle Bundle İçerisindeki Dosyaların Sıralanması

28. Ocak 2013

Geçtiğimiz haftalarda incelediğim Bundling ve Minification yazısında bir dizin içerisindeki kaynak dosyalarımızı joker karakterler ile bir bundle haline getirip sayfamıza ekleyebileceğimizden bahsetmiştik. Bu dizin içerisindeki tüm dosyalar alfabetik sırada bundle içerisinde işlenir ve referans olarak verilen yerlerde bu sıralamada istemciye sunulur. Çoğu zaman bu tercih edilen bir durum değildir. Bazı temel script dosyalarımızın sayfamızda öncelikli olarak referans verilmesini isteriz. Bu temel script dosyalarını kullanan diğer script dosyalarımız ise sonrasında sayfamıza eklenir. İşte bu kurduğumuz hiyerarşik yapıyı oluşturacağımız bundle'lar içerisinde de yapabilmemiz için ya dosya isimlerini alfabetik olarak yarattığımız hiyerarşiye uyacak şekilde hazırlamamız gerekir ya da IBundleOrderer kullanarak bundle içerisindeki dosyalarımızı sıralayacak bir mekanizma oluşturabiliriz. 

Bu yazımda IBundleOrderer interface'ini inceleyerek, basit bir örnek ile bundle içerisindeki script dosyalarımızın hiyerarşisini web.config dosyası içerisinde tanımlayacağımız bir parametre ile yönetmeyi deneyeceğiz.

 

IBundleOrderer interface'i ve Bundle içerisindeki dosyaların sıralanması

Uygulamamız içerisinde oluşturduğumuz Bundle'ların özellikleri arasında Orderer adında bir özellik ile Bundle'ımıza dosyalarını sıralayabileceğimiz bir IBundleOrderer interface'ini uygulayan bir sınıf verebiliyoruz.

Bundle myBundle = new Bundle("~/bundles/SiteScripts", new JsMinify());
myBundle.IncludeDirectory("~/Scripts/SiteScripts", "*.js");
myBundle.Orderer = new MyBundleOrderer();
bundles.Add(myBundle);

Eğer IBundleOrderer interface'ine gözatarsak eğer OrderFiles metodu ile bundle içerisindeki dosyaları sıralayacak bir metod içeren bir interface olduğunu görüyoruz. Bundle oluşturulurken içerisindeki dosyaları parametre olarak gönderip, dönüş parametresi olarak da sıralanmış dosyaların listesini içeren bir kolleksiyon bekleniyor  : 

namespace System.Web.Optimization
{
    public interface IBundleOrderer
    {
        IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context, 
                                                IEnumerable<System.IO.FileInfo> files);
    }
}

Şimdi yukarıdaki örneğimizde kullandığımız ve IBundleOrderer interface'ini uygulayan sınıfımıza gelecek olursak : 

public class MyBundleOrderer : IBundleOrderer
    {
        public IEnumerable<System.IO.FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
        {
            if (ConfigurationManager.AppSettings["HighPriorityScripts"] != null)
            {
                string[] highPriorityScripts = ConfigurationManager.AppSettings["HighPriorityScripts"].Split(',');
                List<FileInfo> listFiles = new List<FileInfo>(files);
                List<FileInfo> orderedFiles = new List<FileInfo>();

                foreach (string highPriorityFile in highPriorityScripts)
                {
                    FileInfo nextFileInfo = listFiles.Find(delegate(FileInfo arg) 
                                    {
                                        return arg.Name == highPriorityFile;
                                    }
                                  );
                    if (nextFileInfo != null)
                    {
                        orderedFiles.Add(nextFileInfo);
                    }
                }

                foreach (FileInfo lowPriorityFile in listFiles)
                {
                    if (!orderedFiles.Contains(lowPriorityFile))
                    {
                        orderedFiles.Add(lowPriorityFile);
                    }
                }

                return orderedFiles;
            }

            return files;
        }
    }
 
<!-- Virgülle ayrılmış script dosyaları -->
<add key="HighPriorityScripts" value="Z_HighPriorityScript.js,SmallJSFile.js" />

 

MyBundleOrderer sınıfı web.config'de yukarıdaki gibi tanımlayacağımız HighPriorityScripts parametresini alıp, öncelik verilecek script dosyalarını belirleyip dönüş yapılacak listeye öncelikli olarak bu dosyaları ekliyor. Sonrasında geriye kalan dosyalar dönüş listesine ekleniyor ve oluşturulan sıralı liste dönülüyor. Böylece bundle'ımız içerisindeki dosyalarımızı web.config dosyasındaki parametremiz ile önceliklendirerek yönetebilir hale gelmiş oluyoruz.

, , ,

ASP.NET MVC 4 Bundling ve Minification

25. Aralık 2012

ASP.NET 4.5 ile yeni gelen özelliklerden biri olan Bundling and Minification temelde sunucuya gelen bir talebe (request), talep sayısını ve boyutunu düşürerek performans kazandırmayı amaçlayan bir özellik. Bu yazımda ASP.NET 4.5 ile gelen bu yeni özelliği ASP.NET MVC 4 ile incelemeye çalışacağım.

Bundling ve Minification'dan Önce

Bundling ve Minification öncesinde bir çok projemizde stil ve script dosyalarımızı sayfalarımıza aşağıdaki gibi tek tek tanımlardık : 

<script src="~/Scripts/SiteScripts/LargeJSFile.js" type="text/javascript"></script>
<script src="~/Scripts/SiteScripts/SmallJSFile.js" type="text/javascript"></script> 
<script src="~/Scripts/SiteScripts/Z_HighPriorityScript.js" type="text/javascript"></script> 

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

Yukarıdaki script ve stil dosyalarını referans eden bir sayfaya istemciden gelen bir talep dört yeni talep daha yaparak her bir dosyayı da sunucudan talep eder (tabii eğer dosyalar cachelenmedi ise). Sayfamızda bulunan resim, video veya animasyon dosyaları gibi harici dosyaların da ayrı birer talep olarak sunucuya geldiği de düşünülürse bir web sayfası içerisinde kaç dosyaya referans veriyor ise sunucuya her biri için birer talep gidiyor demektir. Bu da web sayfalarımızın yüklenme zamanı performansını etkileyen kriterlerden biridir. 

 

Yukarıdaki kod örneğindeki sayfamızı Google Chrome Developer Tools ile izler isek yukarıdaki gibi bir manzara ile karşılaşırız. Sayfamız ilk satırda yükleniyor, sonrasında stil ve script dosyaları (turuncu ve yeşil renkli) sunucudan talep ediliyor.

Bundlelar

 ASP.NET MVC 4 template projesini açtığınızda bu projede bundle'ların kullanıldığını farkedeceksiniz. Aşağıdaki gibi App_Start dizini altındaki BundleConfig sınıfına gözatarsak projede kullanılan script ve stil bundlelarının bu sınıf içerisinde tanımlandığını görürüz. Global.asax.cs sınıfına da gözatarsak eğer Application_Start olayında App_Start dizinindeki tüm config sınıflarının metodları çağrılarak web uygulamamızın ayarlarının yapıldığını görebiliriz. Eğer ASP.NET MVC 3 veya daha önceki versiyondan upgrade ettiğiniz bir web MVC uygulaması üzerinde çalışıyorsanız NuGet ile Microsoft.AspNet.Web.Optimization paketini almayı unutmayın.

StyleBundle ve ScriptBundle sınıflarını kullanıp yaratacağımız yeni bundleları BundleCollection'a ekleyerek uygulamamız içerisinde kullanacağımız yeni bundleları tanımlayabiliriz.

bundles.Add(new ScriptBundle("~/bundles/SiteScripts")
               .Include("~/Scripts/SiteScripts/*.js"));

Yukarıdaki örnekte joker karakterler (* wildcard karakteri) ile Scripts/SiteScripts dizini altındaki tüm javascript dosyalarını yeni tanımladığım bundle'a dahil ediyorum. Burada ufak bir kısıtımız var, joker karakterleri, dizindeki tüm dosyaları kapsayacak şekilde tanımlamama izin verilmiyor.  Yani "Scripts/SiteScripts/*" şeklinde bir tanım çalışma zamanında aşağıdaki hata ile engelleniyor : 

Yukarıdaki yarattığımız bundle'ı aşağıdaki gibi View'larımızda kullanabiliriz : 

@Scripts.Render("~/bundles/SiteScripts")
@Styles.Render("~/Content/css")

Bu durumda sunucudan talep ettiğimiz sayfamızın kaynak koduna gözatarsak eğer aşağıdaki gibi bundle'ımızı tanımladığımız dizindeki script dosyalarının alfabetik olarak sıralı biçimde sayfamıza eklendiğini görebiliriz : 

Hiyerarşik yapıda bir script veya stil dizinimiz var ve bunu bundle haline getirmek istiyorsak IncludeDirectory metodu daha çok işimize yarayacaktır. Metod bize aşağıdaki gibi alt dizinleri de yönetebileceğimiz bir esneklik sağlıyor : 

bool includeSubDirectories = true;
bundles.Add(new ScriptBundle("~/bundles/SiteScripts").IncludeDirectory(
                    "~/Scripts/SiteScripts", "*.js", includeSubDirectories));

Minification

Şimdiye kadar yaptığımız bundle örneklernini 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ı azaltan sihir aşağıdaki gibi EnableOptimization propertisi ile sağlanıyor : 

// BundleConfig.cs içerisine eklenecek.
BundleTable.EnableOptimizations = true; 

Minification'ı aktif hale getiren yukarıdaki satırı eklediğimiz zaman aşağıdaki gibi bir sonuç ile karşılaşıyoruz : 

Görüldüğü üzere üç script dosyası tek dosya halinde ve optimize edilmiş olarak 'SiteScripts?v=xyz-xyz-xyz' gibi bir dosya şeklinde istemciye gönderiliyor. Burada dikkat etmemiz gerene bir diğer nokta dosya isminin sonundaki v parametresi. Versiyon amaçlı kullanılan v parametresi sayesinde optimize ettiğimiz script dosyalarımız 1 sene boyunca istemcide cachelenmiş oluyor. Bu zaman zarfında eğer script dosyalarımız değişir ise yeni bir versiyon numarası otomatik olarak verilerek yeni bir dosya oluşturulup, istemcinin bu yeni dosyayı kullanması sağlanıyor.

Toplam boyutu 160KB olan ve 3 script dosyasından oluşan örneğimin 89KB'a ve tek dosyaya indirmemi sağlayan Bundling and Minification özelliği performans açısından getirdiği artıların yanı sıra uygulamamızda kullandığımız script ve stil dosyalarını derleyip toparlayıp ve daha okunabilir bir kod sağlıyor.

Güncelleme

16 Şubat 2014 

Eğer ASP.NET MVC 3 veya daha önceki versiyondan upgrade ettiğiniz bir web ASP.NET MVC uygulaması üzerinde çalışıyorsanız NuGet ile Microsoft.AspNet.Web.Optimization paketini almayı unutmayın. Bu sayede System.Web.Optimization isim alanına ve yazımda bahsettiğim bundling sınıflarına erişebilirsiniz.

, ,