My First Look At The RequireJS Build Optimizer For Node.js

Over the last few weeks, I've started to look into the RequireJS asynchronous loader and JavaScript dependency management system. Right off the bat, the facilitated modularity and code organization provided by RequireJS feels like a really solid approach to thick-client application development. With the increased modularity, however, we end up with many small, cohesive files. And, while this is great for development and debugging, it's not so great for production where a large number of HTTP requests can result in slower page-loads. To get the best of both worlds, RequireJS provides a build tool that will concatenate and inline dependencies to produce a single optimized JavaScript file for your application.

As with all of my blog posts on RequireJS, this is my first exploration of a particular feature. As such, it's not an in-depth, exhaustive exploration; rather, it's a small glimpse at the power provided by the optimization tool. To experiment with the build tool - r.js - I created a small, pointless JavaScript application that does nothing more than link a few dependencies together. Here is the main HTML file that gets loaded:

test.htm (Our Application User Interface)

As you can see, this does nothing more than load the RequireJS / jQuery bundle and define "main.js" as the core application file. It's important that main.js is external to the HTML page so that the build tool can easily parse it and minify it.

Here is the main.js file. It does nothing more than require a few dependencies and log some success statements to the JavaScript console.

main.js (Our Main Application File)

As you can see, the main file makes use of both the Text plugin (text!) and some standard JavaScript modules. The build tool, as part of the optimization process, will inline the content of the "data.txt" file so that the text value does not require any additional HTTP requests.

Here are the modules being loaded.

data.txt

mod-1.js

mod-2.js

Both of the included JavaScript modules have a dependency on the subsequent.js module. I put this in to make sure that nested dependencies would be parsed as well.

subsequent.js (Our Nested Module Dependency)

So that's all the code in this application. As you can see, it's a rather trite example; the only thing we're trying to test here is the optimizer, not the architecture of the application. When I run the main HTML file, however, I am able to get a successful outcome with the following values logged to the console:

Loaded!
Data: This is text from the data.txt file.
Mod-1: This is mod-1 [SUB-MODULE]
Mod-2: This is mod-2 [SUB-MODULE]

If you were to look at the Firebug Network activity for this page request, you would see that RequireJS made a separate request for every module (and text-file) dependency in the application:

Ok, so now let's take a look at the build process. To optimize the JavaScript files, I've got the r.js file saved in the directory above my application directory. Then, using the command line tool (Terminal on the Mac) I navigated to the application directory and ran the following command:

ben$ node ../r.js -o name=main out=main-built.js baseUrl=.

This will run the "r.js" file through my local version of Node.js (v0.4.8). During the build and optimization process, r.js will parse main.js and following all of its defined dependencies. These dependencies will then be concatenated and minified into the "main-built.js" file.

When I run the above code, I get the following terminal output:

Tracing dependencies for: main
Uglifying file: /testing/jquery/requirejs-1.0/optimizer/app/main-built.js
/testing/jquery/requirejs-1.0/optimizer/app/main-built.js

----------------
/testing/jquery/requirejs-1.0/optimizer/app/text.js
text!data.txt
/testing/jquery/requirejs-1.0/optimizer/app/subsequent.js
/testing/jquery/requirejs-1.0/optimizer/app/mod-1.js
/testing/jquery/requirejs-1.0/optimizer/app/mod-2.js
/testing/jquery/requirejs-1.0/optimizer/app/main.js

This produces main-built.js. And, when I open up main-built.js, I get the following "stuff" (I've added line breaks to make the wrapping work):

main-built.js (Our RequireJS-Optimized Application File)

Pretty crazy stuff! If I go into my main HTML file, however, and change the "data-main" attribute from "main" to "main-built", my page runs properly! In fact, I get the exact same console output:

Loaded!
Data: This is text from the data.txt file.
Mod-1: This is mod-1 [SUB-MODULE]
Mod-2: This is mod-2 [SUB-MODULE]

This time, however, when you look at the Firebug Network activity tab, you see the following:

As you can see, this significantly reduced the number of HTTP requests that needed to be made. One thing that I don't quite understand, however, is why "data.txt" needed to be loaded as an additional HTTP request. If you can look through the minified code produced by the RequireJS build tool, you can see that the content of the "data.txt" file has been inlined with the code. As such, I am not sure why this is showing up as an external dependency.

NOTE: After a little bit of experimenting, I discovered that if I removed the "./" from "./data.txt" dependency definition, the subsequent HTTP request would no longer be necessary. This must have something to do with the way the resource name is being normalized. The "./" must throw off the normalization during the build process?

This stuff is pretty awesome! And, really painless to use (as long as you have node.js installed on your development machine). What's super nice about it is that I can continue to use all the modularity and code separation during development; then, for production, I can quickly and efficiently create a much more optimized JavaScript application file. Awesome pants!

You Might Also Be Interested In: