Combining Javascript and CSS files to lower loading times.

[eluser]zwippie[/eluser]
I have not tested this to the max, but what I have is the following structure:

Code:

/ci                   (base folder for this ci installation)
/ci/.htaccess        
/ci/index.php         (as always)
/ci/system/...etc     (the usual load)
/ci/public/           (dir with public files, images, css, js etc)
/ci/public/css/
/ci/public/js/
/ci/public/combine.php (the script from the link in the startpost, part of the magic)
/ci/public/.htaccess   (the other part of the magic :p)

Content of /ci/.htaccess:

Code:

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond $1 !^(index\.php|public|tmp|user_guide|robots\.txt)
RewriteRule ^(.*)$ index.php/$1 [L]
</IfModule>

Nothing fancy here, this should look familiar. This redirects all page requests to index.php, so CI can do it's job. If the request is for something in the public, tmp or user_guide directory, the request is handled as normal, CI is not used.

Content of /ci/public/.htaccess:

Code:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /ci/public
RewriteRule ^css/(.*\.css) /ci/public/combine.php?type=css&files;=$1
RewriteRule ^js/(.*\.js) /ci/public/combine.php?type=javascript&files;=$1
</IfModule>

Now every request that looks like /ci/public/css/*.css[,*.css,*.css] gets redirected to the combine.php script. The script now concatenates and compresses the lot.
As you can see I used RewriteBase to get the paths right. Perhaps this can be done more elegant. Maybe the two .htaccess files can easily be combined. I'm not really a Rewrite guru.

To get an early result, let's call some (existing) css files: http://localhost/ci/public/css/style.css,menubar.css
The result is a page with both files as plain text.

To call it from a view, use:

Code:

<link rel="stylesheet" type="text/css" href="http://localhost/ci/public/css/menubar.css,sitebuilder.css" />

or

Code:

<scrrrrript type="text/javascript" src="http://localhost/ci/public/js/jquery.js,superfish.js">

somewhere in the header section of your view. (offtopic: could not a normal script tag in a code block here, strange, forum bug? preview works fine but save post deletes the line)

As I said, I have not completely tested this, but it seems to work.