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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Chyby při programování

Jak zobrazit chybové hlášky

Při odstraňování problému v HTML/CSS/JS/PHP/SQL je nutný přístup k chybovým hláškám, jak se k nim dostat?

Převod na VELKÁ a malá písmena

Převod písmen na VELKÁ a malá

Převedení textu na velká nebo malá písmena.

Uvozovky v HTML, CSS, JS, PHP, SQL

Uvozovky v HTML, CSS, JS, PHP, SQL

Jak správně používat uvozovky v HTML, CSS, JavaScriptu, PHP a MySQL.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Načtení obrázku, až když je potřeba

Zpožděné načtení obrázku, až když je potřeba

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

Komentáře