CSS veya JS Dosyalarını Birleştirin

Yönetilebilirliği kolay olsun diye Css veya JavaScript kodlarını çoğunlukla ayrı ayrı dosyalarda tutarız. Örneğin ben, formları biçimlendiren css kodları ile resetleme yapan css kodlarını aynı dosyada tutmayı tercih etmem. Bu şekilde hiyerarşik çalışmak işleri kolaylaştırıyor. Fakat bunun bir dezavantajı var ki dosyaları web sayfamıza bağladığımızda dosya sayısı kadar HTTP isteği yapılıyor. Ayrıca istemci tarafından yapılan her bir istekte, sunucu dosyaları yeniden yüklüyor (bunun için özel bir ayar yapmadıysak). Bu durumdan kurtulmak için herşeyi tek bir dosyada birleştirip, bu dosyayı da önbelleğe almak web sayfalarımızın hızını arttıracaktır.

 

İlk önce dosyaları tek bir dosyada birleştirelim

Yazmış olduğum CombileFiles sınıfı yardımıyla Css veya JavaScript dosyalarınız tek bir dosyada birleştirilir ve bazı sıkıştırma işlemleri uygulanır. Bu işlem hem dosya boyutunu çok aşağıya çeker hem de yalnızca 1 HTTP isteği yapılmasını sağlar. Ve ayrıca sizin belirlediğiniz yaşam süresi (lifetime) boyunca dosyaların içeriği sunucudan değil ziyaretçinin kullandığını web tarayıcısının önbelleğinden çağrılır.

Şimdi de sonuçlara gözatalım

Yukarıdaki örnekte, css dosyaları için eskiden 5 HTTP isteği yapılırken şimdi 2 tane yapıldığı görülmektedir. “index.css” dosyası hariç diğer css dosyaları her istekte sunucudan tekrar yüklenirken şimdi ise tarayıcı önbelleğinden çağrılmaktadır. E peki yaptığımız bu değişiklikler web sayfamız ne kazandırdı? İşte sonuç:

eburhan CombileFiles class

Siz de benim eburhan CombileFiles class isimli sınıfımı kullanarak çok kolay ve zahmetsiz bir şekilde css veya js dosyalarınız birleştirebilirsiniz. Sınıfı kullanmak gerçekten çok kolay. Alttaki kodları bir combine.css.php dosyasına yazıyorsunuz ve sıkıştırılacak dosyaların bulunduğu yere kaydediyorsunuz. (not: daha önceden bir “cache” klasörü oluşturmuş ve bunu yazılabilir yapmış olmalısınız)

require_once 'eb.combinefiles.php';

$conf = array
(
    'fileList' => array(
        '_reset.css',
        '_iskelet.css',
        '_ozeller.css'
    ),
    'cacheDir' => './cache/',
    'cacheExt' => '.css',
    'lifeTime' => 864000,
    'compress' => array('gzip', 'css'),
    'mimeType' => 'text/css',
    'encoding' => 'utf-8'
);

CombineFiles::getInstance()
    ->setConf($conf)
    ->combine();

?>

Daha sonra web sayfanızın etiketleri arasında bu dosyayı şöyle çağırmanız yeterli olacaktır:

 rel="stylesheet" type="text/css" href="/css/combine.css.php" />

Sonuç

Sınıfı eBurhan Araçları sayfasından indirebilirsiniz. İçerisinde bir örnek de mevcut.