Handlebars - Precompilation

handlebars

How can we precompile Handlebars templates?

The compiler will insert templates in Handlebars.templates. If your input file is person.handlebars, the compiler will insert it at Handlebars.templates.person. This template will be a function that may be directly executed in the same manner as templates compiled locally. I.e.

Handlebars.templates.person(context, options);

If you're working with precompiled templates, you don't need to ship the compiler with your deployed application. Instead, you can use the smaller "runtime" build.

<script src="/libs/handlebars.runtime.js"></script>

In addition to reducing the download size, eliminating client-side compilation will significantly speed up boot time, as compilation is the most expensive part of Handlebars.

Because you are precompiling templates, you can also apply several optimization to the compiler. The first allows you to specify a list of the known helpers to the compiler.

handlebars <input> -f <output> -k each -k if -k unless

The Handlebars compiler will optimize accesses to those helpers for performance.

When all helpers are known at compile time, the —knownOnly option provides the smallest generated code that also provides the fastest execution.

If using the precompiler's normal mode, the resulting templates will be stored to the Handlebars.templates object using the relative template name sans the extension. These templates may be executed in the same manner as templates.

If using the simple mode the precompiler will generate a single javascript method. To execute this method it must be passed to the Handlebars.template method and the resulting object may be used as normal.

Please, be sure that different templates are written in separate files with different file names and with the .handlebars extensions (for example demo.handlebars). There is no need of using the <script> tag inside those files.

handlebars path/to/templates -f templatesCompiled.js

The above command iterate over all files within the specified directory, compile them and put the compiled templates in the templatesCompiled.js file. The compiler will insert the templates in Handlebars.templates. If the input file is demo.handlebars, then it will be inserted at Handlebars.templates.demo.

Now we have to include templatesCompiled.js in the HTML file as a normal script. It’s important to note that we don’t need to load the whole Handlebars library as the compiler itself is not needed anymore. We can use the smaller “runtime” build instead:

<script src="handlebars.runtime.js"></script>
<script src="path/to/templatesCompiled.js"></script>

Now we can employ the template that was originally present in demo.handlebars by using the following code:

var context = {
  "name" : "Ritesh Kumar",
  "occupation" : "developer"
}

var resutl = Handlebars.templates.demo(context);
$(document.body).append(result);

Run handlebars --help for more information.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License