Tasarımsal olarak her geçen gün zenginleşen websitelerimiz megabaytlarca CSS ve JS dosyalarını yanlarında getiriyorlar. Bu dosyalar olmadan nerdeyse hiç bir işe yaramayan sitelerimiz, bu dosyaların çok olmasında da yavaş çalışıyor. Tüm CSS ve JS’lerden sadece ihtiyacımız olan parçaları alıp tek css’de birleştirsek nasıl olur?
Bugün Yahoo TR veya Sabah.com.tr gibi Türkiye’nin popüler sitelerinde bile onlarca CSS ve JS aynı anda yüklenmeye çalışıyor. Yeni yapılan nerdeyse her websiteleride böyle olacaktır.
Birkaç ay önce, Jasig’in geliştirdiği uPortal üzerinde uğraşırken; mevcut CSS ve JS’ler içinde kullanılan kodları ayırıp tek CSS-JS’e dönüştürüp tek dosya haline getiren; böylece hem dosya sayısını, hem o dosya sayısı kadar dosyayı tek tek gidip server’dan almayı, hemde gereksiz ve iki kere yazılmış kodların oluşturduğu gereksiz kısmı atan ve yeni bir JS-CSS oluşturan ve bunu kullanan bir sistem gördüm. Sistem çok güzel ve verimli çalışıyordu.
Jasig bu alt yapıyı neyle sağladı bilmiyorum ama kendi projelerimize entegre edebileceğimiz bir kütüphane ile de aynı işlemi gerçekleşebileceğimizi Muharrem Tac Hocamın Blog’undaki şu yazı ile öğrendim. Yazıda bir Eclipse-JSP projesine bu işlemin nasıl uygulanacağını çok ayrıntılı bir biçimde anlatıyordu. Yazıya bakmanızı tavsiye ederim.
Developer Ortamı
uPortal’da yaşadığım sorun; developer ortamında çok sık debug ettiğimiz için işlemin yavaşlaması ve her seferinde tekrar oluşturması idi. Bundan dolayı projenin sonları veya relase yakın aşamasında yapılmasını tavsiye ederim.
Alternatifler (Stackoverflow sitesinden alıntı)
- CSSTidy: CSS parser and optimizer
- Dust-Me Selectors: Firefox add-on that can find unused CSS selectors
- minify: a PHP app that combines, minifies and gzips your site’s CSS and Javascript
- mod_deflate: the Apache module you should be using to gzip your content
- Page Speed: Firebug extension (like YSlow) that checks for various website optimization techniques, but can also minify your CSS for you
- YUI Compressor: Java tool to minify Javascript and CSS
Ayrıntılı Arama Kelimesi: “java JS/CSS optimization”
Ayrıntılı Bilgi :http://code.google.com/p/granule/
Kaynakça
Hiç yorum yok:
Yorum Gönder