Css veya Js Dosyalarını Tek Bir Dosyada Birleştiren PHP Sınıfı

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 CombineFiles 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ığı web tarayıcısının önbelleğinden çağrılır.

Öncesi:

Sonrası:

Ş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ç:

Öncesi:

Sonrası:

CombineFiles class

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.

<?php
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 < head >  < / head >etiketleri arasında bu dosyayı şöyle çağırmalısınız:

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