Bundle paketleme kümeleme bbir araya getirme anlamlarına gelmektedir.
BundleConfig ile orta veya büyük projelerde karmaşıklıklardan kurtularak yönetimi ve anlışılırlığı sağlamaktadır.
Boş bir MVC projesi açalım. App_Start içerisine BundleConfig.cs class ı açalım .
HomeController unda Index actionunun view ını oluşturalım.
Layoutlu bir şekilde.
daha sonra Layout içerisini kontrol edersek burada JS ve CSS uzantılarının belirtildiğini göreceğiz.
biz kod alanımızın anlaşılır olması ve optimmizasyonu sağlamak için bundle oluşturalım.
BundleConfig içine girip
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// CSS - StyleBundle
bundles.Add(new StyleBundle("~/css/all").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"
));
// JS - ScritBundle
bundles.Add(new ScriptBundle("~/js/all").Include(
"~/scripts/jquery-3.3.1.min.js",
"~/scripts/bootstrap.min.js",
"~/scripts/modernizr-2.6.2.js"
));
}
}
yazalım ve Layout içerisinde
@using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/css/all") CSS ÇAĞIRMA
@Scripts.Render("~/js/all") JS ÇAĞIRMA
</head>
<body>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Global.asax içerisinde tanımlamayı yapıyoruz
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
App_Start.BundleConfig.RegisterBundles(BundleTable.Bundles);
}
Projeyi çalıştırdığınızda herhangi bir sıkıntı olmayacağını göreceksiniz.
Şayet sıkıntı oluştuysa WebGrease güncellememiz gerekecektir. (Nuget ten)
Bundle sadece kümeleme sağlamamaktadır. Bir çok avantajı vardır.
BundleConfig içerisinde RegisterBundles altında
BundleTable.EnableOptimizations = true;
yazarsak oluşturduğumuz paketlerin sıkıştırılıp minimize edilerek sayfaya eklenmesini sağlar ve tek dosya olarak bu işlemi yapar.Sayfamız hızlı yüklenir.
Projeleri Publish ederken Release mode olması önemlidir.
Webconfig içerisinde <compilation debug="true" targetFramework="4.5.2" />
debug ı false yapmamız gerekmektedir.
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
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
// TODO : içeriği daha sonra ekleyeceğiz.
}
}
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.
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
RouteConfig.RegisterRoutes(RouteTable.Routes);
BundleConfig.RegisterBundles(BundleTable.Bundles);
}
}
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.
<system.web.webPages.razor>
<host factoryType=".../>
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
// diğer tanımlar
<add namespace="System.Web.Optimization" />
</namespaces>
</pages>
</system.web.webPages.razor>
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.
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.
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("~/Script/jquery-1.10.2.js",
"~/Script/jquery-validation.js"));
}
♦ 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.
public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include( "~/Scripts/jquery-{version}.js"));
}
♦ 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.
public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
bundles.Add(new StyleBundle("~/bundles/jqueryAll")
.IncludeDirectory("~/Scripts", "*.js"));
// aynı işlemi farklı patentler ile yapabilirdik.
, "*.js" // tüm dosyaları ekler
, "b*" // b ile başlayan dosyalar
}
Örneğimize kaldığımız yerden devam edelim. RegisterBundles metodumuzu hazırlayalim.
public static void RegisterBundles(BundleCollection bundles)
{
BundleTable.EnableOptimizations = true;
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery.js",
"~/Scripts/jquery-1.10.2.js",
"~/Scripts/bootstrap.js",
"~/Scripts/modernizr-2.6.2.js"));
bundles.Add(new StyleBundle("~/Content/css")
.IncludeDirectory("~/Content", "*.css"));
}
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.
<head>
@Styles.Render("~/Content/css")
</head>
<body>
<div class="container body-content">
@RenderBody()
</div>
@Scripts.Render("~/bundles/jquery")
</body>
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 Bundling
- js , css dosyaları BundleConfig üzerinden View da render edildi.
- MVC Bundling
Hiç yorum yok:
Yorum Gönder