Compress Dojo and speed up your website
May 24th, 2011 by jde
Dojo is a javascript framework. I contains a lot of ready-to-use functionality which is tested and optimized for a wide range of browsers and browser versions. Therefore frameworks like Dojo makes it a lot easier to be an efficient web developer making functionality that just works.
But Dojo is big an heavy. If you download the latest package on the Dojo website, and put it on your website you’ll soon see a big increase in requests to your webserver, and several seconds added to the loadtime.
It is important that you decide which parts of Dojo you wish to use. It is not difficult and the pay-off is worth it. By building a customized version of Dojo, I shaved off 4 seconds and 60 requests PER PAGE LOAD. That is a lot.
The reason for this is that by optimizing Dojo for your use, everything is packed into a few files with everything you need. No more, no less. Lets see how it is done:
Download the source from download.dojotoolkit.org, for example:
dojo-release-1.6.1-src.zip
Unpack it and create a profile file in ~/util/buildscripts/profiles/
Example profile:
dependencies ={
layers: [
{
name: "my_custom_dojo102.js",
dependencies: [
"dojo.cookie",
"dojo.parser",
"dojo.string",
"dojo.data.ItemFileReadStore",
"dojo.io.iframe",
"dijit.layout.ContentPane",
"dijit.form.DateTextBox",
"dijit.form.TimeTextBox",
"dijit.form.FilteringSelect",
"dijit.form.MultiSelect",
"dijit.form.Select",
"dijit.form.CheckBox",
"dijit.Button",
"dojox.av.FLAudio",
"dojox.cometd"
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
};
In the layers section you must include anything you use apart from stuff in dojo.base (see the ~/dojo/_base folder)
Save it and name it… But make sure the extension is .profile.js. So if you want it to be named “mine”, you must save it as mine.profile.js.
Start a terminal and go to ~/util/buildscripts
./build.sh profile=mine action=release version=1.0.2 localeList=da,sv,nb releaseName=dojo161c102 optimize=shrinksafe cssOptimize=comments
All build options are descriped here:
http://dojotoolkit.org/reference-guide/quickstart/custom-builds.html
After a successful build, your custom Dojo is located in the ~/release folder. Notice that the build is named with whatever you wrote in the releaseName build option. In this example the release is ~/release/dojo161c102
Create a zipped archive and upload it to your website. Then unpack it, and use it:
In your profile you gave your custom Dojo a name. In this example it was “my_custom_dojo102″ and it is used for the name of the javascript file created by the build script.
In your page headers you must include that file along with any css and the main Dojo, example:
<link rel="stylesheet" type="text/css" href="dojo160c102/dojo/resources/dojo.css"> <link rel="stylesheet" type="text/css" href="dojo160c102/dijit/themes/tundra/tundra.css"> <script type="text/javascript" src="dojo160c102/dojo/dojo.js" djConfig="parseOnLoad: true, locale:'da', usePlainJson: true"></script> <script type="text/javascript" src="dojo160c102/dojo/my_custom_dojo102.js"></script>
If you start using elements of Dojo which are not included in your profile, you will of cause need to build dojo again. That is why I always prepend a number to my build. In this example it was 102. Next time I’ll use 103 and so on. That way I make sure that the old build isn’t stuck in the browser cache.
- No Comments »
- Posted in Javascript
