A
B
C
Ç
D
E
F
G
Ğ
H
I
İ
J
K
L
M
N
O
P
R
S
Ş
T
U
Ü
V
Y
Z
Q
W
X
+ Ekle
Bundling ve Minification Desteği - ASP.NET 4.5

Bundling ve Minification Desteği - ASP.NET 4.5

Bu makale Scott Guthrie’nin ASP.NET 4.5 serisinin a rel="nofollow" href="http://weblogs.asp.net/scottgu/archive/2011/08/31/asp-net-vnext-series.aspx" target=_blank>6.bölümüdür
.

Bugün kü konumuzda ASP.NET 4.5 içerisine eklenen, uygulamalarımızında bir çok kolaylık sağlayan ve performansını artırıcı özelliklere sahip bundling ve minification desteğinden bahsedeceğiz.

Bu özelliği, ASP.NET MVC, ASP.NET Web formları dahil tüm ASP.NET uygulamalarınızda kullanabilirsiniz.


Bundling ve Minification Özelliğinin Temelleri

Webte şöyle bir gözlem yaptığınızda insanların artık tamamen mobil cihazlar kullanmayı tercih etmiş olduğunu görürsünüz. Neredeyse tüm uygulamalar artık mobil tabanlı hale gelmiş durumda. Yavaş bir hücresel ağda akıllı telefonlarda dahil basit bir sitenin bile ne kadar ağır yüklendiğini fark etmişsiniz. Kötü performans büyük bir hayal kırıklığı ve müşteri kaybı demektir. Güçlü bir masaüstü için bile sitenizdeki performans yükünün fazla olması bile müşteri kaybı demektir.

Bugün birçok web sitesinin en büyük endişesi oluşturulan birden fazla JavaScript ve CSS dosyalarının ayrı ayrı tutulması ve korunmasıdır. Bu kodlama açısından iyi bir uygulamadır fakat performans açısından bazı talihsizliklerle sonuçlanabiliyor. Birden fazla JavaScript ve CSS dosyası oluşturulduğunda bir tarayıcıda birden fazla HTTP isteği meydana gelir. Bu da performans açısından yüklenme süresini uzatabilir.





Basit Bir Örnek

IE9 üzerinde local bir web sayfası ve gerekli incelemeyi için F12’den developer tools aracını açtım. Aşağıda görüldüğü gibi web sayfasında 5 CSS, 4 JavaScript dosyası oluşturulmuş. Her dosya şu anda tarayıcıdan ayrı ayrı talep ediliyor. Yanıt döndürmek için sunucu tarafında bu bir süreç söz konusu. Bu süreçte dosyaların sayısıyla orantılı olarak artacaktır.


Bundling

ASP.NET içerisine "bundle" sayesinde birden fazla CSS ve JavaScript dosyasının kolaylıkla daha az HTTP istek göndererek kombine edilmesini sağlayacak bir özellik eklendi. Bu işlem daha az dosya ile tarayıcıdaki talebi azaltarak sonuç için geçen süreyi kısaltacaktır.

Aşağıda yukardaki örneğin bundle işlemi sonucunda gerçekleşen web sayfasının güncel hali gösterilmektedir.

Tarayıcı sunucuya daha az istek göndermiştir. Toplam boyut ve dosya içeriği aynen kalmıştır. Yalnızca performans açısından dosyaların yüklenme süresi %20 azaltılmıştır. Yavaş bir ağda test ettiğinizde performans artışını daha iyi farkedeceksiniz.


Minification

ASP.NET içerisine ayrıca "minify" özelliği sayesinde yüklenme sırasında içerik indirme boyutunu azaltacak bir özellik daha eklendi. Bu işlem CSS ve JavaScript dosyalarındaki boyutun azaltılmasının yanısıra içerikteki boşluklar, yorumlar ve gereksiz karakterleride ortadan kaldırılmasını sağlıyor. Sonuç olarak tarayıcıda yüklenme çok daha hızlı gerçekleşiyor.


Aşağıdaki grafikte hem bundling hem de minification olayı birlikte gerçekleştiğinde süreden kazanılan performans artışı gözlenmektedir.


Oldukça küçük bant genişliğine sahip bir ağda neredeyse %40 performans artışı sağlanmış durumda. Bu durum müşteri kazanımı açısından oldukça önemli.

ASP.NET Bundling ve Minification Kullanımı

Yaklaşan ASP.NET sürümünde yukarıdaki senaryolardaki gibi bundling ve minification özelliklerini kullanarak projelerinizdeki performans artışından yararlanmanız mümkün olacak. Bu yeni özelliklerden yararlanarak temiz ve yüksek performanslı uygulamalr geliştirmek artık çok kolay olacaktır.

Şimdi 4 JavaScript dosyaları ile 6 CSS dosyaları olan basit bir projeye sahip olduğumuzu varsayalım:

.css dosyaları için bundling ve minification işlemi

Diyelim ki yukarıda gördüğünüz gibi "styles" adındaki klasördeki tüm CSS dosyalarını projeme referans oalrak ekledim ve her birini ayrı ayrı referans almak istiyorum. Bu demek oluyor ki herbir css dosyası için 6 ayrı HTTP isteği gerçekleşecek.

Şimdi bunu bundling ve minification özelliğinden yararlanarak tekrar yazacağım. "styles" klasörünün sonuna yalnızca "/css" uzantısını ekliyorum. Örneğin aşağıda olduğu gibi...

Bu işlem sayesinde tarayıcıya tüm CSS dosyaları için tek bir HTTP isteği gönderilecektir.


JavaScript dosyaları için bundling ve minification işlemi

Yukarıdaki css dosyalarında uyguladığımız gibi aynı yaklaşımla "scripts" klasörünün sonuna "/js" uzantısı getirildiğinde tüm javascript dosyaları için tek bir HTTP isteği gönderecektir.


Şunuda belirtelim; burada deneme olarak IE kullanılıyor fakat bu işlemler tüm tarayıcılarda aynı şekilde çalışmaktadır.

Sıralı dosyalar ve bundling işlemi

Varsayılan olarak, bir ASP.NET projesindeki tüm dosyalar solution explorer penceresinde alfabetik sıralı olarak yer alır. Buna otomatik olarak bilinen tüm kütüphaneler ve özel uzantılara sahip jquery, monotools, dojo dosyalarıda dahildir.

Varsayılan olarak, CSS dosyalarıda yukardaki tanımda olduğu gibi alfabetik sıralı olarak dizilidir.

1.reset.css
2.content.css
3.forms.css
4.globals.css
5.menu.css
6.styles.css


Sıralama istediğiniz gibi özelliştirilerek en çok kullanım tercihinize göre kolayca değiştirilebilir.


Herhangi sayıda dizinler/alt dizinler eklenti desteği

Projenizde herhangi sayıda dizinler ve alt dizinleri içinde bundling ve minification desteğinden yararlanabilirsiniz. Bundling ve minification özelliğinden faydalanılarak kod yapısı max. düzeye çıkmış olsa da basitlik sunar. Varsayılan olarak her dizin için ayrı bir URL adreslenmesi yapılır.


Bundling/Minification Genişletilebilirliği

ASP.NET bundling ve minification özelliği genişletilebilir desteğine sahiptir.


Özel Kurallar

Aşağıdaki kodda uygulamadaki Global.asax sınıfını kullanarak "customscript" e nasıl kayıt eklendiğini göstermektedir.

Yukarıdaki özel bundle işlemi ile aşağıdaki gibi <script> referans alınarak herhangi bir yerde uygulama içinde başvurulabilir:


Özel İşlemler

Özel bir işlem desteğiyle bundle edilmiş dosyalarda olduğu gibi varsayılan css ve javascript dosyalarınıda override edebilirsiniz. (örneğin, LESS or Coffeescript syntax için SaaS desteği gibi)


Aşağıdaki örnekte minification dönüşümüyle özel MyJsTransform ve MyCssTransform sınıfları meydana getirdik. Bu alt sınıflara CSS ve JavaScript minifier sayesinde extra bir işlevsellik eklenebilir.

Bundling ve Minification Eylemi üzerine video

Mads Kristensen tarafından hazırlanan a rel="nofollow" href="http://www.asp.net/vnext/videos/aspnet-vnext-videos-bundling-and-minification" target=_blank>ASP.NET Bundling ve Minification
özelliği üzerine hazırlanmış 90 saniyelik bir güzel bir video var. Bağlantıdan izleyebilirsiniz.


Özetle

ASP.NET 4.5 da bu yeni bundling ve minification desteği sayesinde kolay, hızlı web uygulamaları geliştirebileceksiniz. Kullanımı oldukça kolay olmasının yanısıra mevcut iş akışı içerisinde önemli değişiklikler yapmanızıda gerektirmez. Ayrıca istediğiniz şekilde özelleştirmenizi sağlayan zengin genişletilebilir API desteği sunmaktır.

ASP.NET MVC, ASP.NET Web Formları ve ASP.NET Web tabanlı uygulamalar için kolayca bu yeni destekten yararlanabilirsiniz.

Bundling ve Minification ile ilgili türkçe yazılmış a rel="nofollow" href="http://daron.yondem.com/tr/post/aspnet_45teki_dahili_js_css_minification" target=_blank>ASP.NET’teki dahili JS/CSS Minification
konusunuda incelemek isterseniz bağlantıdan yararlanabilirsiniz.

Faydalı olması temennisiyle...


Haberci Grup adına hazırlanmıştır.


  • diline pelesenk olmak ne demek
  • dillere pelesenk olmuş ne demek
  • pelesenk
  • pelesenk ne demek
  • Pelesenk Ne Demek – Pelesenk Sözlük Anlamı
  • pelesenk olmak ne demek
  • pelesenk olmak ne demektir
  • pelesenk olmuş ne demek
  • Yüksek Yüksek Tepelere sözleri
  •   Ad Soyad
      Yorum