Dynamic JavaScript loading with compression

Question

Hi,

Although I am using the Zend framework, MooTools JS library and my questions revolves around them, this is a more generic question.

I am working on a web app, in which I am using many elements which are sometimes useful on other pages (for example OpenLayers related MooTools classes).

Mootools already allows this "segmentation" by "classing" (creating "Class"..) so I feel tha the next thing to do is to have separate JS file for every class, then send a request to a PHP page with the classes I want and get in return JS file with what I need. At the same time this mechanism will minify and gzip and cache locally on the server (for future requests) and send me back this one file.

I didnt go into design yet and was wondering if such / similar solution is out there? Alternatively I see libraries like labJS that speeds things up by multi threading the requests, this however does not complete the solution with minification and gzip (I have to take care of this server side with another complementary solution).

Is any one using similar dynamic JS "Class" loading solution?

Cheers, Roman

Answer 1

I'm not familiar with zend and only somewhat familiar with mootools so take this with a larger-than-average grain of salt.

Wouldn't it be easier to have a process that generates/minifies all the possible combinations of the classes you have and then just request a particular combination? You could automate this with a script pretty easily.

Also, I've used the HyperCache and WP_Minify plugins for wordpress and they do pretty much everything you are talking about so you might want to look there for inspiration.

Answer 2

What you describe is pretty much what the YUI PHP Loader does, although it is tailored towards the YUI JavaScript library. However, the project is open-source under the BSD license so it is a good place to get some ideas to implement your own.

Do also have a look at Lissa (which is based on YUI PHP Loader) that is a generic JavaScript (and CSS) loader.

Answer 3

I think the tool you want to look at is the minify project. Here's a description:

Minify is a PHP5 app that helps you follow several of Yahoo!'s Rules for High Performance Web Sites.

It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

It's very straightforward to use, and, say you have it installed in http://example.com/min/, and you have two files to compress:

• /resources/js/lib/library.js
• /resources/js/main.js

You would call this url:

http://example.com/min/b=resources/js&f=lib/library.js,main.js

And the code looks like:

<script type="text/javascript"
   src="/min/b=resources/js&amp;f=lib/library.js,main.js"></script>

So basically there is a consistent URI based way to merge files together.