Demo project around precompiled templates for some template engines. The goal is implement and configure things correctly, and to look for minimal footprint and best performance.
- Module format: AMD (using Require.js + optimizer)
- Modules are optimized and external templates will be precompiled and bundled.
- The three optimized modules use the runtime version of each template engine.
- Template engines included are Handlebars, Hogan, and Dust.
- Dedicated plugins for require.js + optimizer are used for each engine (HB, HGN, DST).
- These plugins are stubbed out in the optimized modules.
Install & build
npm install bower install grunt
Working demo at
modules/index.html. Open browser console for rendered output.
grunt, the optimized build is at
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
|Full library (min)||37764||5885||32671|
NOTE Don't compare apples and oranges: this table is only meant to show the difference between the full and runtime version of a particular engine.
Size of compiled templates
With a larger source template of 27254 bytes:
Note that the Dust source templates are slightly smaller due to its delimiter syntax (
- Footprint: Hogan has the smallest footprint, both the engine itself and the precompiled templates are small (it also has the smallest feature set!). However, Dust quickly catches up when templates become larger.
- Performance: Handlebars seems the fastest engine to render precompiled templates in most cases/browsers (though the tests are very limited in range and scale!).
It's important to note that this is a very rough comparison between template engines using only their most basic features. When adding some complexity (e.g. helpers, partials), size and performance will change.