Builds

Make your production code small and fast

Havok uses dojo's AMD loader to load modules, and has a handy ability to compile less client side. This makes development, unit testing and code reuse easy. However, it makes sites slow. An average havok page might load over 60 separate javascript files, and compile 15 less files. All those requests take too long for a production environment.

Havok can utilize the dojo build system to create layers. Each layer consists of three parts:

  • A single compressed javascript file containing many AMD modules
  • Locale modules that contain translations for the layer
  • A compressed css file that contains all the compiled less for the layer

To build havok layers you will require:

  • node.js installed
  • a buildconfig.js that sets up the build environment
  • a profile.js that describes what should be built

Furthermore, the havok build process has two parts:

  • build profile preprocess
  • the actual build

A buildconfig.js sets up dojo to run in the node.js environment. It must describe all the packages that will be used during the build.

If you are only building havok with none of your own custom modules, then you can use havok/build/buildconfig.js as is.

If you have other packages, or your own custom modules you wish to include in your build, then copy havok/build/buildconfig.js and add your extra packages to the packages array.

A build profile is a js file that describes which packages will be built, which modules should be in any layers, and lots of other switches that can be used to tailor your layer for a specific runtime environment.

The most important aspect of defining a build profile is the layers. Each layer defines a single compressed js file with the included modules and their dependencies along with a compressed css file of all the less for that layer.

Look in the havok/build/profile directory. There you will find a heavily commented example profile, as well as the profile used to create the havok.js distributable.

You can build the example profile by executing sh build-example.sh in the havok/build directory.

Havok inculdes a build profile preprocessor. The preprocessor takes much of the hard work out of creating a working build profile.

It will merge your profile with the default build settings in havok/build/defaultProfile. These settings are tuned for browser deployment. They will work for most, but advanced users or alternative runtime environments might require different settings.

It will merge your dojo config (including the shared di config) into your profile, so that config merge doesn't happen at run time.

To run the preprocessor use:

node havok/build/buildconfig.js load=havok/build/preprocess --profile path/to/your.profile.js

The preprocessor will output a new modified profile called your.profile.preprocessed.js

Run the build with:

node havok/build/buildconfig.js load=build --profile path/to/your.profile.preprocessed.js

Check the build-report.txt to see any build errors and the exact content of your layers.

Place the following in your head tag to use your built dojo layers:

<link rel="stylesheet" href="path/to/layer.css">
<script src="path/to/bootable/layer.js"></script>

Note: these docs use a bootable havok layer. Take a look at the source to see.

Loading more havok...