Question

I’m starting to use the Dojo toolkit and it has rich features like Dijits and themes which are useful but take forever to load.

I’ve got a good internet connection but those with slower connections would experience rather slow page loads.

This is also a question about heavy vs light frameworks. If you make heavy use of widgets, what are some techniques to keep page load times down?

Answer 1

Dojo has a build system that will drastically improve load times. Take a look at one of the dojo books or the online docs & look at layered builds. In order to do a build, you need to have the “source” (or “full”) version of dojo, which has the build tool included — you can tell if you have this by the presence of the ‘util’ directory (which is at the same level as dojo, dijit, dojox). If you don’t have the full version, go back to the dojo site & delve down into the download area — it’s not completely obvious perhaps.

Anyway, if you have the right version, you basically just need to make a “build profile” file (or files … aka a layered build), which is essentially your list of dojo.requires that you would normally have in your html. The build system will jam all the javascript code for all the dijits, dojox stuff, etc. together into a “layered build” (a file) and it will run shrinksafe on it, which sort of minifies the code (removes whitespace, shortens names, etc). It will also do some of this to the css files. Aside from making things much smaller, you get just a single file for all the js code (or a few files if you do more than one layer, but most of the time a single layer suffices).

This will improve your load times at least ten-fold, if not more. It might take you a bit of reading to get down the format of the profiles and the build command itself, but it’s not too hard really. Once you create a build file, name it something obvious like “mystuff” and then you can dojo.require the “mystuff” file (which will be in the new build directory that is created when you build, then underneath that & hanging out with the dojo.js file in the dojo directory). Requiring in your built file will satisfy all the dojo.require’s you normally do (assuming you have them all listed in the profile to build) and things will load very fast.

Here’s a link to the older build docs, which mostly still hold true:
http://www.dojotoolkit.org/book/dojo-book-0-9/part-4-meta-dojo/package-system-and-custom-builds

Here’s the updated docs (though perhaps a little incomplete):
docs.dojocampus.org/build/index

It reads harder than it really is … use the layer.profile file in the profiles directory as a starting point. Just put a couple of things & then do a build & see if you get the release directory created (which should be at the same level as dojo, dijit, etc.) and it will have the entire dojo system in it (all minified) as well as your built (layered) stuff. Much faster.

Dylan Tynan