Question

I have a huge web app in Javascript and its starting to become something of a hassle to manage everything. I broke everything up into little files each with their own subsection of the app.

eg. if the app is named “myApp” I have a file called

myApp.ajax.js which contains

myApp.ajax = (function(){return {/*stuff*/}})();

and one called

myApp.canvas.js which contains

myApp.canvas = (function(){return {/*stuff*/}})();

so on and so forth. When I concatenate all the files and minify them I get a huge garbled mess of all of this together. So I was wondering, Is there a build system that would turn all of this int one single

var myApp = {
   ajax: /*stuff*/,
   canvas: /*stuff*/,
   /*etc*/
}

when it compiles everything?

I ask because I ran a small test and noticed a serious perfomance decay when having each part of the object seperate. Test is here: http://jsperf.com/single-object-vs-multiples

Answer 1

I’m not sure if I get the point of this. Concatenating and minifying JavaScript will always end up in a fairly garbled mess (at least to read). Just make sure that you concatenate first and then minify, then the compiler you are using can optimize the whole thing.

And as for performance concerns. The JSPerf test told me, that the way you attach your modules is roughly 12% slower (at least in Firefox, seems to be different for V8). But you are doing it only once at application load – not 1000000 times. That can only make a difference somewhere in the microseconds at page load.