Follow transdisplay on Twitter

Random Articles

Combining Javascript & CSS PDF Print E-mail
Written by Joo Trans   
Thursday, 13 August 2009 19:14

Compressing the files will decrease the size of the data that needs to be transferred, it does not solve the problem that the browser can only download a limited number of files at the same time. If you have many different files that need to be loaded the browser will not optimally use the bandwidth it has access to.

It will request some files from the server and wait until those files are retrieved before the rest of the files are requested. The solution to this problem is to combine all those different files into one large file.

And this is exactly what the script tries to do. You can concatenate different files by simply adding the names of the other files to the URL of the first file.

Take for example the following URLs:

http://www.mysite.com/javascript/prototype.js
http://www.mysite.com/javascript/builder.js
http://www.mysite.com/javascript/effects.js
http://www.mysite.com/javascript/dragdrop.js
http://www.mysite.com/javascript/slider.js

You can combine all these files to a single file by simply changing the URL to:
http://www.mysite.com/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

The script will intercept the attempt to retrieve something from the javascript directory and will notice that you want to fetch multiple files at once. It will then concatenate the requested files, compress it and send it as one to the browser.

onfigurating this script is easy. First you need to download ands ave as  combine.php file. By default this script look in the javascript and css directory in the root of your website, but if you are currently using different directories you can change these values at the top of the combine.php script. Upload the combine.php script to the root of your website. Secondly you need to create a cache directory that is writable by the web server. Again, by default this script will look for the cache directory in the root of the website, but you can change this in the combine.php script. Finally you need to  add the following code into your .htaccess file.

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*\.css) /combine.php?type=css&files=$1
RewriteRule ^javascript/(.*\.js) /combine.php?type=javascript&files=$1

Note: if your preexisting .htaccess file already uses URL rewriting you do not need to add the first two lines. You can simply add the last two lines to the bottom of the .htaccess file.

 
Erfolgreiche Suchmaschinenoptimierung in Deutschland und Oesterreich. look boot camps with these guys