Let's say on your homepage you have file1.js and file2.js. These files are merged into file1-2.js and the customer - let's call him John - downloads this and his browser caches it. If he tries to download this file again, the browser will skip the download and load the cached copy. This is great because John only had to download a single file, which is definitely going to be quicker than downloading the two files separately.
Just like last time John downloads file1-2.js (which is made up of file1.js and file2.js) while visting the homepage of our site. This is cached and if he comes across this specific file again, his browser will skip the download and use the cached copy.
<reference name="head"> <block type="page/html_head" name="custom.js" template="page/html/head/js-merge.phtml" /> </reference>
Next we need to create the page/html/head/js-merge.phtml template in our custom theme.
<?php echo $this->getCssJsHtml() ?>
This template need only contain the single line above.
Finally we can start adding JS files to it using the usual XML layout method.
<reference name="custom.js"> <action method="addJs"><script>varien/product.js</script></action> </reference>
Separate Magento Product JS
Let's take a look at a real world example. The following XML shows how to set this up for a Magento product using a default Magento installation with the default Magento JS files loaded. If you have custom JS files loaded on your product page, you would need to adjust accordingly.
You should notice that as the JS files I'm adding to the custom block have already been added to the default Head block, they must first be removed. If we don't remove them, the files will be included twice.
<catalog_product_view> <reference name="head"> <!-- /** * We first remove the JS from the default 'head' block **/ --> <action method="removeItem"> <type>js</type> <script>varien/product.js</script> </action> <action method="removeItem"> <type>js</type> <script>varien/configurable.js</script> </action> <action method="removeItem"> <type>js</type> <name>calendar/calendar.js</name> </action> <action method="removeItem"> <type>js</type> <name>calendar/calendar-setup.js</name> </action> <!-- /** * We then define the new block as a child of 'head' * This doesn't have to be as a child of head. It can be included anywhere */ --> <block type="page/html_head" name="head.product_js" template="page/html/head/js-merge.phtml"> <!-- /** * We then add the JS back but into our new block * This could be done elsewhere using <reference name="head.product_js"> **/ --> <action method="addJs"> <script>varien/product.js</script> </action> <action method="addJs"> <script>varien/configurable.js</script> </action> <action method="addItem"> <type>js</type> <name>calendar/calendar.js</name> </action> <action method="addItem"> <type>js</type> <name>calendar/calendar-setup.js</name> </action> </block> </reference>
As a side note, you can remove the calendar.js and calendar-setup.js files completely as they are rarely required for a Magento installation.