Theorie: JS/CSS combineren in dynamische site

[xces]

Even een vraag of de volgende "theorie" gaat werken en/of er een snellere manier is. Al tijden combineer ik mijn CSS/JS files via php en ik minify ze ook daar waar nodig. Dit alles doe ik op basis van de timestamp van de file.

Kortom, ik kijk van een set files, maak daar een hash van en dan weet ik de bestandsnaam van de gecombineerde JS files. Vervolgens loop ik de set om te kijken of 1 van de files een latere wijzigingsdatum heeft dan de gecombineerde files en zo ja, herbouw ik de file.

Nu heb ik dit voorheen allemaal in code gedaan, ofwel de code moest aangepast worden als er een nieuwe CSS en/of JS file geinclude moest worden.

Nu wil ik eigenlijk de volgende methode gaan gebruiken;
- Gegenereerde (XHTML) files wegschrijven naar disk
- Hierin zitten de links naar de CSS en/of JS files.
- Bij het outputten doe ik een regex om te kijken wat deze files zijn
- Verder met combineren / datum check.

Nu is zoiets natuurlijk redelijk makkelijk te doen en het voordeel is dat ik niet meer een code file hoef aan te passen om een JS file te includen, maar dit gewoon in het backend in de template kan doen. Nu is concreet mijn vraag; zien jullie hierin problemen in en/of doen jullie het anders?

p.s. ik heb helaas niet de mogelijkheid om mijn JS/CSS te minifyen en te combineren voordat ik ze upload gezien het CMS wat erachter zit.

[TeeDee]

Is het niet makkelijker om je styles / js te includen middels een .php file?

code:

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

In styles.php eventueel via het filesystem de benodigde files inladen, minifyen et voila. Misschien kan je gebruik maken van JSmin.

p.s. ik heb helaas niet de mogelijkheid om mijn JS/CSS te minifyen en te combineren voordat ik ze upload gezien het CMS wat erachter zit.

Is het niet netter om dit wel in je CMS te krijgen ipv een workaround te gebruiken?

[Snake]

TeeDee schreef op maandag 27 juli 2009 @ 13:29:
Is het niet makkelijker om je styles / js te includen middels een .php file?

code:

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

In styles.php eventueel via het filesystem de benodigde files inladen, minifyen et voila. Misschien kan je gebruik maken van JSmin.


[...]

Is het niet netter om dit wel in je CMS te krijgen ipv een workaround te gebruiken?

styles moet je niet dynamisch maken. Dat doet het nut van styles in een appart stylesheet helemaal teniet. Het moet namelijk mogelijk zijn voor de browser zijn style te kunnen cachen.

[TeeDee]

Snake schreef op maandag 27 juli 2009 @ 13:31:
[...]

styles moet je niet dynamisch maken. Dat doet het nut van styles in een appart stylesheet helemaal teniet. Het moet namelijk mogelijk zijn voor de browser zijn style te kunnen cachen.

Ik heb het ook niet over het dynamisch maken van je styles. styles.php kan je o.a. met de juiste headers prima laten cachen.

[Niemand_Anders]

Na amper 3 seconden zoeken (apache module javascript minify) had ik al een module welke alle javascript bestanden kan verkleinen en hier eentje welke CSS bestanden minimaliseerd.

Ook voor IIS zijn dergelijke modules beschikbaar. Waarom is deze methode afgevallen?

[xces]

TeeDee schreef op maandag 27 juli 2009 @ 13:29:

[...]

Is het niet netter om dit wel in je CMS te krijgen ipv een workaround te gebruiken?

Mensen moeten zelf JavaScript en CSS in kunnen voeren, dus het is niet handig als ik voor ze ga bepalen dat dit geminificeerd moet zijn.

@Niemand_Anders
Ik was niet op zoek naar een module aangezien ik al een werkende methode heb, die alleen verbeterd kan worden, bedankt voor de links. Het minifyen kan ik inderdaad doen met een dergelijke module, wat overigens geen slecht idee is aangezien deze ook caching doet en waarschijnlijk een stuk sneller is dan PHP (alhoewel ik dit eerst moet testen).

Het combinen daarentegen dien ik nog wel zelf te doen (en dat doe ik weer om teveel http-requests te voorkomen).

[ Voor 43% gewijzigd door xces op 27-07-2009 14:16 ]

[Zoijar]

of een gzip verbinding, zoals tweakers hier doet.

[xces]

gzip doe ik ook al.. het gaat er dus om dat bijv dit soort code:

code:

<link rel="stylesheet" ... />
<link rel="stylesheet" ... />
<link rel="stylesheet" ... />
<link rel="stylesheet" ... />
<link rel="stylesheet" ... />

etc. gecombineerd gaat worden naar 1 file. wat 5 http-requests combineerd naar 1. Ik houd overigens ook rekening met relatieve paden etc. naar images die goed herschreven worden.

[ Voor 4% gewijzigd door xces op 27-07-2009 14:20 ]

[TeeDee]

Dan kan je toch prima

code:

<link rel="stylesheet" src="styles.php" />

gebruiken om alle losse stylesheets in dat PHP script te combinen via het Filesystem?

[xces]

Correct, maar dan ben je nog steeds aan het inlezen en combineren, terwijl je dat beter 1x kunt doen gezien performance.

[Guillome]

Het inlezen van je 5 stylesheets gebeurt dan gewoon op de server, wat maakt dat dan nog uit? Je hebt dan maar 1 http request. Ze moeten toch een keer ingelezen worden...

[frickY]

Minify doet al precies wat jij wilt.

Minify is a PHP5 app that can combine multiple CSS or Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching. This helps you follow several of Yahoo!'s Rules for High Performance Web Sites. (See "Problem Domain" below for more info.)

Precies hetzelfde als wat je nu zelf probeert te bouwen, maar dan al compleet klaar.

[quote]• Combines and minifies multiple CSS or JavaScript files into a single download
• Uses an enhanced port of Douglas Crockford's JSMin library and custom classes to minify CSS and HTML
• Caches server-side to avoid doing unnecessary work
• Responds with an HTTP 304 (Not Modified) response when the browser has an up-to-date cache copy
• Most modules are lazy-loaded as needed (304 responses use minimal code)
• Automatically rewrites relative URIs in combined CSS files to point to valid locations
• With caching enabled, Minify is capable of handling hundreds of requests per second on a moderately powerful server.
• Content-Encoding: gzip, based on request headers. Caching allows it so serve gzipped files faster than Apache's mod_deflate option!
• Test cases for most components
• Easy integration of 3rd-party minifiers
• Separate utility classes for HTTP encoding and cache control

[ Voor 124% gewijzigd door frickY op 28-07-2009 09:26 ]

[xces]

Ik gebruik op dit moment minify, maar het grootste punt wat ik met minify heb is dat het een spuuglelijke URL opleverd. Het liefste zou ik geen minify meer gebruiken, d.w.z. gewoon linken naar 1 specifieke file. Nu kun je je afvragen of het nog zin heeft om dit soort dingen aan te gaan passen c.q. te tweaken, maar om eerlijk te zijn kan ik op dit moment even niet meer exact neerzetten wat ik wil bereiken.. ff terug naar de denktafel.

[Cartman!]

Ik heb een soortgelijk iets als minify gemaakt. Ik geef door welke css/js files ik wil hebben, dat levert dat (met routes, Zend Framework) een volgende url op: loadcss/screen,ie6 waarbij ie screen.css en ie6.css opzoekt, alle whitespace trimt, comments stript en automatisch gzipt en een goede cache header meestuurt. Voor css pakt ie ook de @import nog mee zodat als je in screen.css verwijst naar een andere file die em ook automatisch mee in laadt. Voor versiebeheer zou je een timestamp erachter kunnen plakken om te zorgen dat na een update gebruikers toch de nieuwe versie krijgen.