O webu
Spojení CSS a JS souborů

Při zrychlování webové stránky se může uspořit trochu času snížením počtu HTTP spojení složením všech CSS do jednoho souboru. Stejně tak u JavaScriptu. Kromě toho se můžou z CSS/JS odstranit bílé znaky (což trochu srazí i datovou velikost a může odradit pár kopírovačů).

Zmačkání souborů do jednoho je vhodné nějak zautomatisovat.

  • Sloučení stylů umí zajistit CSS preprocesory.
  • Spojování a minifikování skriptů a stylů umožňuje v Nette Frameworku zajistit rozšíření Webloader.
  • Další možnost je ruční spojení nebo jednoduchý PHP skript

Hotové spojování v PHP

Jako primitivní řešení se mi osvědčil následující skript, který přežvýká CSS připojené přes <link> i obsah <style>. A stejně tak spojí interní a externí <script>y.

Stáhnout Zmačkátor

Spojení CSS a JavaScriptu do společných souborů

Použití

Před daným obsahem se vloží Zmačkátor a zavolá funkce zmackat, které se předá obsah:

<?php include 'zmackator.php';
zmackat(<<<EOT

Potom následuje připojení stylů a skriptů následované:

EOT
)?>

Funkce zmackat si stáhne obsah externích CSS/JS, smíchá ho s interními styly/scripty v původním pořadí a vytvoří dva soubory, které se jednoduchým skriptem trochu zmenší (odstraní se komentáře a některé nadbytečné mezery):

cache/style.css
cache/script.js

Nakonec je tato funkce při<link href>uje a při<script src>uje místo původního obsahu.

Funkci zmackat jde ovlivňovat dalším parametrem (kromě HTML kódu připojující CSS a JS).

  • vypnout — Nic se spojovat nebude, HTML kód připojující soubory se nezmění.
  • hotovo — Zadáním nějaké jiné neprázdné hodnoty (třeba hotovo) se jen připojí hotové, již vytvořené, sloučené soubory. Hodí se k použití v ostrém provozu, kdy se nemusí soubory znovu generovat.
  • S prázdným nebo nezadaným druhým parametrem se při každém načtení CSS a JS přegenerují, přepíší a připojí do stránky.