Combining Javascript and CSS files to lower loading times.

[eluser]murphy2006[/eluser]
Hello,

I am trying to combine all CSS and Javascripts with the help of the below technique.
Does anyone know how to "port" this technique to CI, or is there another way that is already working?

http://rakaz.nl/item/make_your_pages_loa..._css_files

Kind Regards,
Daniel

[eluser]Armorfist[/eluser]
I don't know if its exactly what you're looking for, but CI supports output compression by default if you set the $config['compress_output'] variable to 'TRUE' in the 'application/config/config.php' file:

Code:

/*
|--------------------------------------------------------------------------
| Output Compression
|--------------------------------------------------------------------------
|
| Enables Gzip output compression for faster page loads.  When enabled,
| the output class will test whether your server supports Gzip.
| Even if it does, however, not all browsers support compression
| so enable only if you are reasonably sure your visitors can handle it.
|
| VERY IMPORTANT:  If you are getting a blank page when compression is enabled it
| means you are prematurely outputting something to your browser. It could
| even be a line of whitespace at the end of one of your scripts.  For
| compression to work, nothing can be sent before the output buffer is called
| by the output class.  Do not "echo" any values with compression enabled.
|
*/
$config['compress_output'] = TRUE;

[eluser]zwippie[/eluser]
I did a quick test with the combine.php script, and after some tweaking of the .htaccess file it seemed to work fine. Have to test further to see how well it performs.

I think the compression Armorfist points at, is for the pagecontent only. Not totally sure of that.

[eluser]Armorfist[/eluser]
Just had a look at the CI's compression method, it uses "ob_start('ob_gzhandler')", so zwippie was right, it only compresses the page content not the css and javascripts. Going to have closer a look at the "combine.php" script.
Also you might want to have a look at http://codeigniter.com/wiki/Asset_Linker/

[eluser]murphy2006[/eluser]
zwippie. Is it possible that you could post the code you use on the page aswell as in the .htaccess file.

Thanks,
Daniel

[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.

[eluser]Armorfist[/eluser]
I took a different approach and included the script as a controller. You can download it here.

To make it work, extract the config and the controller to your CI directory, then open the combine.php config file and edit the css and javascript paths (the cache path is /system/cache by default).

To load the files go to: http://yourdomain/combine/index/type/files

Example:
http://yourdomain/combine/index/javascri....js-moo.js
http://yourdomain/combine/index/css/admi...-style.css

I changed the separation character as you might noticed, thats because CI's URI system doesn't let you put "," or "|" on the url. So to separate the files you use "-" instead.

Don't know if this is the correct approach in the MVC model. I'm thinking to implement this system in a library, if i do, i will post it here. Hope this helps.

Edit:
I don't think caching is working very well this way, if you have caching enabled and remove cache files under firefox, it stops working for some reason. I advise you to leave cache FALSE, and to set a non existent cache directory to make sure it doesn't cache the files. The script has some bugs.

[eluser]Unknown[/eluser]
[quote author="zwippie" date="1202426563"]

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>

As I said, I have not completely tested this, but it seems to work.[/quote]

Could not figure out for the life of me why this didn't seem to work on my install, then I noticed the semi-colons in the RewriteRules. It looks like the forum's filter is adding them in after the fact.

They should both end with:
files=$1

I also had to change the file name delimiter in combine.php from a comma (",") to a legal URI character. I chose the tilde ("~") since I don't think it will occur in my normal URIs, but perhaps it would be better to simply add the comma to CodeIgniter's list of legal characters. Any thoughts?