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:
- download a dojo- SDK (or “source-release”) (http://dojotoolkit.org) (the uncompressed code is not enough), it contains data required to create dojo builds
- ensure java 1.4.2 or later is set up on your computer
- unzip dojo sdk file and go to: cd <dojo_folder>/util/buildscripts
- 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"]
]}
- 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!
- now run the following command:
./build.sh profileFile=<path_to_myapp.profile.js> action=clean,release releaseName=cusomizedDojo
- wait a few minutes (maybe more!)
- 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.
- 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.