reklama

Ako bezproblemovo komprimovat js a css subory a servovat ich ako gz

V mojich predoslych clankoch som popisoval techniky ohladne optimalizacie css a js suborov, tak aby sme dosiahli ich co najmensiu velkost. Tieto techniky spolocne so spravnym kesovanim (cachingom) dosiahnu ze rychlost nacitania a vykonania aplikacie sa podstatne zrychli. Nastrojov na komprimaciu je viac ale co robit ked napriklad u niektorych ajaxovych javascriptov sa porusi ich funkcionalita? Ako dosiahnut tiez aby aj css a js subor bol zo serveru posialany ako g-zip kontent? Pri jednom mojom projekte, ktory je zaroven podstatnym zdrojom prijmov som sa s tymto problemom nevedel vysporiadat dlho. Tomu je vsak koniec. Sposob som nasiel.

Písmo: A- | A+
Diskusia  (4)

Pokial mate vo vasej aplikacii script vytvarajuci g-zipovu komprimaciu vdaka Firebugu (excelenty plugin Firefoxu pre kazdeho developera) mozete zistit ci css a js subory vas server posiela komprimovane. Ked si v konzole Firebugu kliknete na tab oznaceny "Net" tak sa vam zobrazia vsetky http-requesty prave zobrazenej stranky. Kliknite si na akykolvek js alebo css zaznam a ako prve sa zobrazia headers. Prvy header zobrazuje response header a pod nim request header. Co to vlastne znamena. Je to trochu opacne ale budiz. Druhy header znamena poziadavku vasho browsera voci serveru (header request) a ten prvy znamena ako server odpovedal. (header response) No a pokial v "header response" nevidite toto: Content-Encoding gzip, znamena to, ze server posiela css alebo js subor do vasho prehliadaca nekomprimovany. Ako ich vsak skomprimovat?

SkryťVypnúť reklamu
Článok pokračuje pod video reklamou

Skusal som viacero technik bez vacsieho uspechu a zial u niektorych Ajaxovych javascriptoch som nemohol pouzit ani komprimaciu z pomoci "packerov" nakolko sa znicila cela funkcionalita. Sposob vsak existuje. Vola sa J-smart a za moznosti dvoch sposobov pouzitia najskor vycisti javascriptovy alebo css subor od zbytocnosti, bez toho aby ho poskodil, nasledne ho skomprimuje g-zip kompresiou a servuje ho do prehliadaca ako gz-content. V praxi to vyzera asi takto:

710802cf5b2540ad36d5246fe4aedf8d.css.gz

78104af9d2896b2d93e883b337272844.js.gz

Ked skontrolujeme nasledne cez Firebugovu konzolu uz vidime ze response header vypisuje ze subor je komprimovany g-zipom.

SkryťVypnúť reklamu
reklama

Samotna implementacia je mozna dvoma sposobmi jeden je cez htaccess subor a pokial nemate pristup k htaccesu s moznostou Mod-Rewritu, nie je problem, nakolko je aj ina moznost implementacie a to cez header vasho dokumentu. Kompletne postupy implementacie ako aj moznost stiahnutia zdrojovych kodov najdete na autorovej stranke. Z mojej skusenosti mozem povedat, ze je to prvy nastroj ktory fungoval bez jedineho problemu a momentalne stranka, ktora je dynamicka a obcas dosiahne rozmerov 98Kb po kompletnej komprimacii je servovana do prehliadaca vo velkosti 7.8kB.

Zdrojove kody a podrobne postupy ohladne implementacie.

Peter Akarkor

Peter Akarkor

Bloger 
  • Počet článkov:  39
  •  | 
  • Páči sa:  0x

Mojim domovom je miesto kde prave zijem ale vlastou navzdy zostane len jedna krajina. a mozno preto to tak trochu boli .....Kodex BlogeraFeedjit Live Website Statistics Zoznam autorových rubrík:  TutorialyNezaradeneZazitkySúkromnéPolitika

Prémioví blogeri

Iveta Rall

Iveta Rall

87 článkov
Milota Sidorová

Milota Sidorová

5 článkov
Pavol Koprda

Pavol Koprda

10 článkov
Adam Valček

Adam Valček

14 článkov
Juraj Hipš

Juraj Hipš

12 článkov
Monika Nagyova

Monika Nagyova

295 článkov
reklama
reklama
SkryťZatvoriť reklamu