RequireJS – Optimizing and Building One File

requirejs is a wonderful framework which allows to manage script dependencies in javascript quite easy. The idea is simple: each javascript module (object or class) is defined in a separate file. This method of organizing the code, gives ease the development process in finding code, maintaining it and also enforce (in some way) good practice for loose coupling.
However, if modules are divided to separate files, it means that we need to load all js files. That means that it might be lots of http requests which can lead to overload on servers, low performance and others.
In this post I want to show how requirejs allows us to minify all files into one master file.

Typical Structure of a RequireJS Web Application

When writing a web app using requirejs, it’s important to separate each module to its own file. So, a typical file may look like this (I used backbone for this example):

The folder structure of the application may be as followed:


So, the js folder might include hundreds of js files – and we wouldn’t want to load all of them one by one. Locally it works fine, but serving it for others when remotely will result in low user experience and performance.

Preparations for building one master file

It is a good practice to keep any build related files and generally, ant other files that are not required for the application, in a separate dedicated folder.

  1. Install nodejs.
  2. Create a new folder outside your application and name it – “build” or some other name related to build. In this folder we’ll keep the files that are necessary to the build process.
  3. Download r.js file and put inside the “build” folder.


Now we’re going to create a configuration file for the build process. This file includes information that is relevant for the build process. It tells the build where to start, what to do etc.
Create a new file inside the “build” folder and name it: “app.build.js”.
this is a working example of my app.build.js file:

Please notice that the files of my application are located in the “app” folder. Additional options for this build json can be found in the r.js example github.

Running The Build

All you have to do now is open your console (i.e, cmd in windows), navigate to the “build” folder and run this command:

You can find the new files in the folder that is defined in the “dir” property in app.build.js.
Additional help configuration can be found on the requirejs optimizer page.

Bonus: Automating Build Process with SublimeText

Since i’m working with SublimeText for code editing, I would like to have the option to build my project from. Fortunately, it’s easy to accomplish.

  1. From sublime’s menu, go to -> Tools -> Build System -> New Build System ….
  2. Paste this code to the new created file:
  3. Save the new configuration build with a preferred name – I used “RequireJS Optimization”.

To use it, make sure the new reuqirejs build is checked in this menu – Tools -> Build System.
Press “Ctrl + B” or Tools -> Build.

Recent Posts

Latest Tweets

Written by:

Experienced Front End Architect & Javascript Consultant