MVC projelerimizin default oluşumunda gelen bir özellik ve Microsoft gerçekten bu özelliği kullanmamızı istiyor.
Kullanımı basit, sayfa içerisinde o kadar çok css ve script tanımlıyoruz ki bazen biz bile ne nerden geliyor karıştırıyoruz. İşte bundle tam da bunu engellemek için yapışmış birşey.
Karışıklığı önlediği gibi eklediğimiz css ve js dosyalarını da optimize ederek, yüklemeden yani performansdan tasarruf sağlıyor ve bu sayede arama motorlarının bizi üst sıralara taşımasına yardımcı oluyor.
Gelelim kullanımına;
MVC projemizde ki App_start kalsöründe bulunan BundleConfig.cs dosyamıza alt örnekte olduğu gibi css ve scriptlerimizi ekliyoruz. İstediğimiz gibi ekleyebiliriz. Ezme durumlarından dolayı parça parça olarak ta ekleyebilirsiniz.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
Not düşmek gerekir se * işaretleri siz sürüm notu bildirmeden va olan sürümün numarasını almaya yarıyor.
Ön yüzde çağırmak gerekirse;
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
Kullanım gördüğünüz gibi bu kadar basit. Üst kısımda ki kodu sayfamızın neresinde css ve js dosyalarımızın çıkmasını istiyorsak oaraya kaymamız gerekiyor.
Yazımın başında da dedim ya optimize diye bir durum da var. İşte onun içinde BundleConfig.cs dosyamızın içine en üst kısımda ki paylaştığım kodun altına
BundleTable.EnableOptimizations = true;
Eklememiz gerekiyor.
Örnek Dosya İçin
Görümek üzere,
Osman KURT
Yazılım Uzmanı & MVC Eğitmeni