Consolidate JavaScript and CSS files for loading

(Markus Birth) #1

Today I noticed that the Piwik Dashboard loads 25 .js and .css files. Since the browsers only load one file at a time and doing 25 HTTP-GET requests also take some time, I wrote some Smarty function to consolidate several files into one.

Attached, you’ll find the Smarty functions: addJS, addCSS, compileJS and compileCSS. I also included a replacement js_css_includes.tpl which makes use of these new functions.

addCSS and addJS add one file to the array of files to process.
compileCSS and compileJS consolidate these files into one, store it in the cache dir and return the path to that file.

The usage should be clear from looking at the included js_css_includes.tpl.

ATTENTION: I only included the new configuration parameter in the global.ini.php - so don’t overwrite your file with it but instead add the line to your file in the smarty section. Don’t forget to create that directory.

Download: [attachment=56:piwik_sc…date.tar.gz]

P.S.: I don’t know why, but Firefox gives a script error, when compiling all JavaScripts into one single file. So I had to split it into two files for it to work.

(vipsoft) #2

Can you attach that to ticket 660 in trac with diffs against svn?Thanks.

(Matthieu Aubry) #3

it’s a start, but we also want to minify the JS when summarizing it, as well as caching the output on disk so that we don’t minimize it at every request; see ticket for more info and link to similar code in openx.