[Proto-Scripty] Re: Shrinking JS
2009/3/20 Szymon Wilkołazki wilkola...@gmail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... You should consider a few enhancements: 1. Cache the output file on the disk, and serve it if the source files hadn't changed. Your server will not have to process the files each time, but only when 2. Insert versions of source files to the url, get rid of question mark, use mod_rewrite instead. The browser would request, for example: URI: /loadJs/proto-1603_scripty-182ef_customScripts-rev1234.js And in .htaccess of /loadJs forward all the urls to your js_load_min.php This will give browsers a chance to cache the js files. 3. Add Expires: header, in far future. I usually make it 100 years from now. Combined points 2. and 3. ensures that any user will have to download your js files once and only once, and redownload it only if he cleared his browser cache. The version strings in the URL ensures, that he WILL for sure download a new version if you update the scripts. 4. run a regular expression on all of source files to get /* (c) copyright Comments */ from them, then prepend your minified file with those comments. Not doing that violates most of the open source licenses. GPL for sure, and I'am pretty sure this also applies to MIT and BSD licenses. Implementing all those points will provide a reliable way to serve javascript, always fast and always with correct version, with respect for the authors of the libraries! Richard: For the debugging purposes I do not use minified and consolidated javascript. I have a build process which compresses the js when I commit sources to svn. It consolidates and compress javascript. So, I code and test and debug plain readable files, then commit. Then I test the minified versions on pre-deploy enviroment, but at this point no debugging is required. I then deploy only the minified scripts. Regards, SWilk All good points. Excellent topic. The server side caching is really useful. I can show a drastic reduction in the bandwidth used for my CSS and JS files once I started doing that. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
Thanks but i wasnt looking to do it, i just had an idea !! Regards Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 11:46 AM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: Thanks but i wasnt looking to do it, i just had an idea !! Regards Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 11:46 AM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! No problem. Just saving you becoming a wheel maker. The one I linked to uses gzip to compress the files and then caches them on the server. That way, whenever a change is made, everyone gets a new pre-cached compressed file. No need to re-compress it. This means the actual transfer goes from many hits to none, once cached. It works really well on our intranet (IE6, IE7, FF, Chrome, Safari, Opera - Windows, Linux desktop and Macs). Richard. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
ahh !! .. mine has mod_defalte and zlib compression all on the server anyway so i didnt need to !! ... I did notice that his method doesnt minify the files ... Each to their own Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 1:30 PM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: Thanks but i wasnt looking to do it, i just had an idea !! Regards Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 11:46 AM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! No problem. Just saving you becoming a wheel maker. The one I linked to uses gzip to compress the files and then caches them on the server. That way, whenever a change is made, everyone gets a new pre-cached compressed file. No need to re-compress it. This means the actual transfer goes from many hits to none, once cached. It works really well on our intranet (IE6, IE7, FF, Chrome, Safari, Opera - Windows, Linux desktop and Macs). Richard. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Shrinking JS
2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: ahh !! .. mine has mod_defalte and zlib compression all on the server anyway so i didnt need to !! ... I did notice that his method doesnt minify the files ... Each to their own Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 1:30 PM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: Thanks but i wasnt looking to do it, i just had an idea !! Regards Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 11:46 AM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! No problem. Just saving you becoming a wheel maker. The one I linked to uses gzip to compress the files and then caches them on the server. That way, whenever a change is made, everyone gets a new pre-cached compressed file. No need to re-compress it. This means the actual transfer goes from many hits to none, once cached. It works really well on our intranet (IE6, IE7, FF, Chrome, Safari, Opera - Windows, Linux desktop and Macs). Richard. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! That was easy to add in. The main reason I chose not to in the end was that the caching deals with it all anyway. Having the server handle the compression is a good thing too. If you are not in control of the server, then having to do it yourself and dealing with the crap IE6 says is an area where you can have some fun. As for minification, how does that impact on JS debugging? -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous
[Proto-Scripty] Re: Shrinking JS
thats why i minify on the fly , then its just one change in a .htaccess file to change a path and i can have packed or unpacked scripts ! - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 2:52 PM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: ahh !! .. mine has mod_defalte and zlib compression all on the server anyway so i didnt need to !! ... I did notice that his method doesnt minify the files ... Each to their own Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 1:30 PM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Alex Mcauley webmas...@thecarmarketplace.com: Thanks but i wasnt looking to do it, i just had an idea !! Regards Alex - Original Message - From: Richard Quadling rquadl...@googlemail.com To: prototype-scriptaculous@googlegroups.com Sent: Friday, March 20, 2009 11:46 AM Subject: [Proto-Scripty] Re: Shrinking JS 2009/3/20 Richard Quadling rquadl...@googlemail.com: 2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... My tests are as follows .. Using Latest Prototype.js Latest Scriptaculous.js Latest Effects.js [phpcode] require($_SERVER['DOCUMENT_ROOT'].'/resources/includes/server/ jsmin.php'); // jsmin $docroot=$_SERVER['DOCUMENT_ROOT']; // array values need changing to reflect your include path(s) $jsArray=array( p=$docroot/resources/includes/client/proto.js, f=$docroot/resources/includes/client/functions.js, s=$docroot/resources/includes/client/scriptaculous.js, e=$docroot/resources/includes/client/effects.js ); $required_js=explode(,,$_GET['load']); foreach($required_js as $reqkey=$reqvalue) { echo JSMin::minify(file_get_contents($jsArray[$reqvalue])); } [/phpcode] Usage: URI - js_load_min.php?load=p,s,e,f will go through the array and find the relevant files, then echo them out into one big file (minified on the fly) - this gets round the 2 requests per domain Async loading issues some people have with multiple CDNS and lots of remote images/includes - it can easily be ported to get the files remotely and some caching of some sort would easily be added ... On my test i loaded 5 javascript files from the same server as the page on thier own and page load was 4 seconds ... after using the above code i got the load time down to averageing 1.5 seconds per refresh. Then testing with only 3 files (prototype,scriptac,effects) the normal load method was around 1.8 seconds on 1st load, then dropped to 0.8 (AVG) per refresh .. while the method above was 1.5 seconds on every load and refresh Someone may find this usefull / interesting and perhaps likes the concept and may want to do something with it, i dont have time at the moment !!! Regards Alex http://rakaz.nl/item/make_your_pages_load_faster_by_combining_and_compressing_javascript_and_css_files -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! I had to do some minor mods for IE6 to this. But it works REALLY well. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! No problem. Just saving you becoming a wheel maker. The one I linked to uses gzip to compress the files and then caches them on the server. That way, whenever a change is made, everyone gets a new pre-cached compressed file. No need to re-compress it. This means the actual transfer goes from many hits to none, once cached. It works really well on our intranet (IE6, IE7, FF, Chrome, Safari, Opera - Windows, Linux desktop and Macs). Richard. -- - Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498r=213474731 Standing on the shoulders of some very clever giants! That was easy to add in. The main reason I chose not to in the end was that the caching deals with it all anyway. Having the server handle the compression is a good thing too. If you are not in control of the server, then having to do it yourself and dealing with the crap IE6 says is an area where you can have some fun. As for minification, how does that impact on JS debugging? -- - Richard
[Proto-Scripty] Re: Shrinking JS
2009/3/20 Jeztah webmas...@thecarmarketplace.com: After a little playing ove the last couple of days i came up with a nice easy way of shrinking many js files on the fly into 1 file ... this will speed up load time heavily on heavy javascript loaded sites . the code is php and is very simple .. it also uses http://www.crockford.com/javascript/jsmin.html to achieve its goal ... Now i must say in my tests sites with 3 or less large javascript includes this wil not speed up much - infact it wil be slower ... You should consider a few enhancements: 1. Cache the output file on the disk, and serve it if the source files hadn't changed. Your server will not have to process the files each time, but only when 2. Insert versions of source files to the url, get rid of question mark, use mod_rewrite instead. The browser would request, for example: URI: /loadJs/proto-1603_scripty-182ef_customScripts-rev1234.js And in .htaccess of /loadJs forward all the urls to your js_load_min.php This will give browsers a chance to cache the js files. 3. Add Expires: header, in far future. I usually make it 100 years from now. Combined points 2. and 3. ensures that any user will have to download your js files once and only once, and redownload it only if he cleared his browser cache. The version strings in the URL ensures, that he WILL for sure download a new version if you update the scripts. 4. run a regular expression on all of source files to get /* (c) copyright Comments */ from them, then prepend your minified file with those comments. Not doing that violates most of the open source licenses. GPL for sure, and I'am pretty sure this also applies to MIT and BSD licenses. Implementing all those points will provide a reliable way to serve javascript, always fast and always with correct version, with respect for the authors of the libraries! Richard: For the debugging purposes I do not use minified and consolidated javascript. I have a build process which compresses the js when I commit sources to svn. It consolidates and compress javascript. So, I code and test and debug plain readable files, then commit. Then I test the minified versions on pre-deploy enviroment, but at this point no debugging is required. I then deploy only the minified scripts. Regards, SWilk --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups Prototype script.aculo.us group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---