Menü

ASP.NET Web Optimization Framework

11 Ağustos 2017 - Asp.Net MVC

Yazdığımız web uygulamalar için bir önemli konu da hiç kuşkusuz performans diyebiliriz, bu durumda yardımımıza Web Optimization Framework yetişiyor. En kaba tabiriyle ; web uygulamaların performansını en iyi duruma getirmek için yazılmış bir kütüphanedir.

Kullanılan Teknik

  1. Sunucuya gelen istek sayısını azaltmak
  2. İstenen kaynakların boyutunu küçültmek

 

Neden Kullanmalıyım

Birçok neden olmasıyla birlikte ben kısaca bir kaçından bahsetmek istiyorum,

Bazı tarayıcılar eş zamanlı bağlantı sayıların sınırını 6 olarak belirleyebiliyor ve böyle olunda da fazla sayıdaki istekler kuyruğa alınmış olur bu da yüklenme hızını etkiler.

Farklı amaçlar için kullandığımız Css ve JavaScript kaynak kodlarını minimize ederek daha az bant genişliğiyle projenize dahil eder. Gecikmeyi azaltır ve Pil ömrünü uzatabiliyor.

Tek bir istekle harici Css ve Js kaynak kodları projenize dahil edilir.

Nasıl Kullanırım

Ben kendi uygulamamda Visual Studio 2017  ASP.Net Mvc Kullandım ama sadece Mvc de kullanılmadığını belirtmek isterim.

1

Öncelikle File >New > Project ten bir web projesi açıyoruz. Daha Package Manager Console açarak ” InstallPackage Microsoft.AspNet.Web.Optimization ” tırnak içerisindeki metni girip entere basınız.

Bu işlemden sonra Referances menüsü altında Kütüphanenin referanslara eklenip eklenmediğini kontrol ediniz.

 Visual Studio

2

App_Start klasörü altında BundleConfig classını oluşturuyoruz ve RegisterBundles statik metodunu oluşturuyoruz.

include ile dosyalarınızın yollarını göstererek istediğiniz kadar ekleme yapabilirsiniz. Burdaki ” ~/Js ” ve ” ~/Css ” dosyaları ise birleştirilmiş hal olup. View tarafında render etmemiz için kullanacağımız alanlardır.

visual studio

İnclude metodu altında istediğiniz kadar dosya ekleyebilirsiniz. Css dosyaları ve Js dosyaları ayrı ayrı eklenmiştir. Bunların tetiklenmesi için de Global.asax dosyamıza gidip bu paketlerin tetiklenmesi için gerekli kodumuzu yazalım.

visual studio

3

Son işlem olarak da bunları Görünüm tarafına yani View e ekleme sırası.

cooding

Ben Css için render ettim ama siz body tag ın son kısmına  Script ( @Scripts.Render(“~/Js”) ) dosyalarını da render edebilirsiniz.

Dikkat etmenizi istediğim nokta ; @using System.Web.Optimization şekldeki gibi eklenmediği taktirde render dosyaları bulunmayacaktır ve aşağıdaki hatayı verecektir. Bende bu hatayı aldım ve bu yazıyı yazmama vesile oldu. Önemli olan hatayı çözümsüz bırakmamak 🙂

Sicript Hatası : Severity Code Description Project File Line Suppression State
Error CS0103 The name ‘Styles’ does not exist in the current context  …

Son Olarak Uygulamamızı çalıştırıp tarayıcıda kaynak kodlarına baktığımızda Css ve JavaScrip kodlarımızın aşağıdaki gibi eklendiğini göreceksiniz.

<link href="/Css?v=LJh3V1l1p7XEliyGSeDscGN0-Q75h26rrrsWYq0R-Ks1" rel="stylesheet"/>
<script type="text/javascript" src="http://localhost:59669/b0a6e337f300454c9cc13044c248d359/browserLink" async="async"></script>

 

 

Etiketler:, , , ,

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir