As the HTML5/Javascript application I am working on comes to a close, it was time I started looking at how to speed up and optimize the site for all the devices that will be hitting it.  I started looking around and I found things like Uglify: https://github.com/mishoo/UglifyJS, which does a good job of minifiying your javascript but was still missing some things I was needing, its mainly for just optimizing a file, not a set of files.  I also came across Grunt.js, which I spoke about in an earlier post, but for now, Grunt does a few extra things I am not really interested in, like Linting and running tests, I should probably use that library down the road but for now I am liking the Require.js optimizer found here: http://requirejs.org/docs/optimization.html.  Basically to use the optimizer, you just create a directory somewhere in your app and grab the r.js file found here: https://github.com/jrburke/r.js/, install node from here: http://nodejs.org/download/ and then place a build file inside there and you will be ready to go, they have a lengthy example of a build file found here: https://github.com/jrburke/r.js/blob/master/build/example.build.js#L27-35.   That file will show you a lot of the features, probably way too many that you don’t care about so I have attached the file that I ended up using that does the job.

Some explanation here, the baseUrl in my example is just the directory relative to where my “Scripts” folder would be, or the folder that contains all my js/html files.  The dir is where you want all the optimized files to go, the paths is just for libraries that you want the optimizer to handle for you, for example, we use the bing control, which is located on the web and the optimizer won’t compile it so I am telling it to ignore it during the build with the “empty:” string.  The optimizer also has issues with the text plugin for require so I have that in there as well.

If you make use of the mainConfigFile, you won’t have to include all the paths to all your libraries, the optimizer will handle that for you, this is just a pointer to your Main.js file, I highly recommend using that and not duplicating all that.  If you set  preserveLicenseComments to false the optimizer won’t keep all the comments in your libraries, resulting in much smaller files.  Setting removeCombined to true removes all the files the optimizer uses to create your files, resulting in a much cleaner output directory and shows you potentially which files are not being used.

The modules section is what I like to call the “Entry Points” of your application, of course the main entry point of the application is “Main.js” so you naturally have to include that one.  Then you will notice that I have the next module just a path to an entry point.  If for example you have a site listing cars, if you have a link that kicks off a view that lists cars, then you would want to include that view, which would tell the optimizer to also go grab any other dependencies and views that are being used by that, it will take all of that and wrap it up into a single file, thus reducing greatly the amount of HTTP requests the application has to make and increasing speed tremendously.

To kick off the optmizer, just open up a command window on windows and type this in once you have node installed: node r.js -o app.build.js

I hope this helps somebody struggling with the optimizer, I spent a few days with it getting it exactly where I wanted, please feel free to ask questions, I will do my best to get back with you.