This procedure is based upon two reasonably good references:
- http://dojotoolkit.org/documentation/tutorials/1.6/build/
- http://dojotoolkit.org/reference-guide/build/
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.
Prereqs
Fetch a dojo source build, for example:
Unzip this in a sandbox directory on your machine, for example:
/home/sag/sandbox/dojo-release-1.6.1-src
where you will find subdirectories dojo, dijit, and dojox.
Coding
Here are two simple files I created, based upon first reference. First the HTML:
/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
<!-- load Dojo -->
<script src="dojo/dojo.js"></script>
<script>
dojo.require("my.app");
function init() {
alert("Dojo ready, version:" + dojo.version);
dojo.byId("greeting").innerHTML +=
". Greetings from dojo " + dojo.version;
}
dojo.ready(init);
</script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>
and then the javascript:
/home/sag/sandbox/dojo-release-1.6.1-src/my/app.js
dojo.provide("my.app");
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.compat");
You are now set up to do the build for this HTML/javascript.
Build
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:
./build.sh
action=release
htmlFiles=/home/sag/sandbox/dojo-release-1.6.1-src/buildtest.html
It runs for a minute or so.
Inspect the results. The important files are a new dojo.js and new app.js
/home/sag/sandbox/dojo-release-1.6.1-src/release/dojo/dojo/dojo.js
/my/app.js
Test
Move the three files to the filesystem of your webserver. For example, for apache:
/var/www/html/dojo/dojo-opt/buildtest.html
/dojo/dojo.js
/my/app.js
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.
Ecorptrainings.com provides DOJO in hyderabad with best faculties on real time projects. We give the best online trainingamong the DOJO in Hyderabad. Classroom Training in Hyderabad India
ReplyDelete