Create a custom dojo build

When you develop an application with dojo, you can pretty quickly end-up with tens of http calls to load all dojo.require() files on demand. In my case, for a simple script relying on dijit.Dialog & dijit.Tooltip, firebug reporting more than 25 http calls for individual files. In production, this is not optimal at all.

So we will try to use dojo utilities to create our custom dojo file containing all (and only) the required dojo code into a single file. Problem is that there is scarce help on this matter on the Internet and official documentation is not correct!

Here are the steps:

  1. download a dojo- SDK (or “source-release”) (http://dojotoolkit.org)  (the uncompressed code is not enough), it contains data required to create dojo builds
  2. ensure java 1.4.2 or later is set up on your computer
  3. unzip dojo sdk file and go to: cd <dojo_folder>/util/buildscripts
  4. now create a new file that you will save wherever you want and call it “myapp.profile.js
    In this file we will put the following content:

    dependencies = {
    layers:
    [
    //This layer is used to discard modules
    //from the dojo package.

    {
    name: "dojo.js",
    customBase: true,
    discard: true,
    dependencies:
    [
    "dojo._base"
    ]

    },

    //This layer is used to discard modules
    //from the dijit package.

    //Custom layer mydojo.js which
    // includes our custom Dojo artifacts
    {
    //place the file under dojoRootDir
    name: “../../mydojo.js”,
    layerDependencies:
    [
    "dojo.js",
    ],
    dependencies:
    [
    //modules to be included from the
    //custom project. You can probably
    //list a single module here which in
    //turn declares all the required
    //modules as opposed to listing all the
    //modules individually. Please take a
    //look at dojoRootDir/dojo/_base.js
    //file for an example.
    // "dojo._base"
    "dijit.Dialog",
    "dijit.Tooltip"

    ]
    }
    ],

    prefixes: [
    ["dijit", "../dijit"],
    ["dojox", "../dojox"]
    ]

    }

  5. customize this file as you wish, basically simply list all the module you need where I put dijit.Dialog & dijit.Tooltip. Do not worry about modules required by these two modules, they will be automatically inserted by the build script!
  6. now run the following command:
    ./build.sh profileFile=<path_to_myapp.profile.js> action=clean,release releaseName=cusomizedDojo
  7. wait a few minutes (maybe more!)
  8. when the script has finished running, go up to dojo-root folder, a new folder named ‘release’ has been created, your dojo code is in there! The file you’re interested into is at the root of this folder and is named ‘mydojo.js’ or whatever name you put in your profile file.
  9. That’s it!

One-step further

At this point, we have generated a mydojo.js file containing all shrinked code for our dojo modules. Problem is that it does not contain dojo.js itself! It tried to include ‘dojo._base’ as a required module but it did not work. What I did was simply to open dojo.js in a word editor, copy its content and paste it at the top of mydojo.js file.

Now you have all your dojo-related js code in a single file! Exactly what we wanted.
If we insert this file in our code, replacing regular dojo.js file, we can see in firebug that no-more http calls are made!

Important notice

In my case, a folder named ‘nls’ was generated. It seems that this folder content cannot be incorporated into the single js file by build-script => I left it on its own in my /js folder and a single http call is made to retrieve the content of appropriate language file. A single extra http-call seems acceptable to me so  I left it this way.

Illustration

Before:

After:

Woooow! this is far better.

sources

4 Comments: Trackback URL | Comments RSS

  1. Okeowo aderemi Says:

    Will try this out,be at it for hours, and no luck.

  2. agustin Says:

    Hello There,
    Well, I follow the 7 steps very carefully. Read all about build and all about dojo. Three days nightmare and so on… Need some help.

    I’m using the last version of dojo. 1.7.2 in:

    which contains
    –dojo
    –dijit
    –dojox
    –utils

    I use the following profile:

    dependencies = {
    stripConsole: “all”,
    action: “release”,
    optimize: “shrinksafe”,
    layerOptimize: “shrinksafe”,
    //optimize: “closure”,
    //layerOptimize: “closure”,
    //mini: true,
    //localeList : ‘en-us’,
    //cssOptimize: “comments”,
    //selectorEngine: “acme”,
    releaseName: “content7″,
    layers: [
    {
    // This is a specially named layer, literally 'dojo.js'
    // adding dependencies to this layer will include the modules
    // in addition to the standard dojo.js base APIs.
    name: "dojo.js",
    customBase : true,
    dependencies: [
    "dojo.fx",
    "dijit.form.Button",
    "dojox.gauges.AnalogGauge",
    "dojox.gauges.AnalogArcIndicator",
    "dojox.gauges.AnalogNeedleIndicator",
    "myApp.smartmix"
    ]
    }
    ],

    prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "myApp", "../../../myApp" ]
    ]
    };

    then i use this build script

    ./build.sh profile=../../../../myApp/myApp.profile.js releaseDir=../../../release

    And I got the

    which contains
    –dijit
    –dojo
    –dojox
    –myApp

    NOW in my index.html file I have

    //

    dojo.require(‘myApp.smartmix’);

    And YES this reduce the 230 files loaded without the build to 153 files.
    BUT stills I (want to) believe that is posibble to reduce to one or 2 files.

    But HOW?????

    Please, some help will be appreciated!!!!

  3. kiran Says:

    Yes , same question as above….
    also

    when i followed the same steps with version 1.7.1
    i got the errors as
    error(303) Missing include module for layer. missing: dojo/_base; layer: 0
    error(303) Missing include module for layer. missing: dojo/_base; layer: 0

  4. Shankar Says:

    What to do after building? Should we copy only mydojo.js and include in the html or copy all the things in the release folder?
    Can you be more clear on what to do after building?
    Thanks

Post a Comment

Your email is never published nor shared. You're allow to say what you want...

Powered by sweet Captcha