Wednesday, August 17, 2011

How to create an optimized build for the Dojo Toolkit

Here is the step-by-step procedure I used to create an optimized dojo build.  This creates a dojo build which contain exactly what is needed by my app, no more, no less.    Using an optimized dojo build results in fewer downloads from the server, and less data transferred overall.

This procedure is based upon two reasonably good references:
It took me a while to make it all work because the filesystem locations were not obvious to me. 

Design Pattern

Adopt a design pattern where all your require() statements for dojo code are located in one javascript file.  This allows the dojo build process to create one new javascript file with the same name, to replace your original.  The new file replaces your list of dependents with the actual dojo javascript code.  


Fetch a dojo source build, for example:
Unzip this in a sandbox directory on your machine, for example:
where you will find subdirectories dojo, dijit, and dojox.


Here are two simple files I created, based upon first reference.  First the HTML:


<!DOCTYPE html>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>

    <!-- load Dojo -->
    <script src="dojo/dojo.js"></script>


        function init() {
            alert("Dojo ready, version:" + dojo.version);
            dojo.byId("greeting").innerHTML += 
                ". Greetings from dojo " + dojo.version;
    <h1 id="greeting">Hello</h1>

and then the javascript:




You are now set up to do the build for this HTML/javascript.


Go into the util/buildscripts directory.  For example:
    cd /home/sag/sandbox/dojo-release-1.6.1-src/util/buildscripts

Issue the build command.  Specify the path to your HTML file.  For example:
It runs for a minute or so.

Inspect the results.  The important files are a new dojo.js and new app.js


Move the three files to the filesystem of your webserver.  For example, for apache:

Browse to the HTML and verify it works.

Verify Improvement

I captured screenshots of the downloads required when fetching the original HTML/javascript with the original dojo build.  It required more than a dozen file downloads.  (click the photo to enlarge)

Fetching the new HTML/javascript with optimized dojo results in three, much smaller downloads.


  1. Hi, it is one week already am desperatly trying to build my one dojo, i have dowloaded sources on dojo's web site of the current lattest version (1.9.0), i included the dojo directory in my html file, declare all the dojo requires, an launch the build command, everything goes well, i copy therefore the dojo, dijit and dojox directory that has been produced and stored in the release directory, when i execute my html file, i see no change, firebug still report me a lot of 'GET' actions between client and server. Please can someone explain to me what to do?

    1. HMS, you might want to try asking here: Sorry I am not current.