Skip to content
BranchesTags

Latest commit

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json

Repository files navigation

Precompiled Templates

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.

After running grunt, the optimized build is at dist/index.html.

Numbers

Size of engine: full vs. runtime

Switching to the runtime version for precompiled templates can save lots of bytes:

_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343

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

When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:

_HandlebarsHoganDust
Source220220202
Compiled JS1061683671

With a larger source template of 27254 bytes:

_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%

Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).

Performance

Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.

Conclusions

  • 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.

About

Performance, footprint and configuration of template engines and precompiled templates

Resources

Readme
Activity

Stars

12 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
GitHub - webpro/precompiled-templates: Performance, footprint and configuration of template engines and precompiled templates · GitHub
Skip to content
BranchesTags
Latest commit
History
2 Commits
Folders and files
NameName
Last commit message
Last commit date
modules
modules
.bowerrc
.bowerrc
.gitignore
.gitignore
Gruntfile.js
Gruntfile.js
README.md
README.md
bower.json
bower.json
package.json
package.json
Repository files navigation
Precompiled Templates
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.
After running grunt, the optimized build is at dist/index.html.
Numbers
Size of engine: full vs. runtime
Switching to the runtime version for precompiled templates can save lots of bytes:
_HandlebarsHoganDust
Full library (min)37764588532671
Runtime (min)441624497291
Runtime (min+gzip)187611172343
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
When precompiling templates from source to a JavaScript function, the size increases (this is normal: e.g. templating syntax is translated to function calls). With a small source template of 220 bytes:
_HandlebarsHoganDust
Source220220202
Compiled JS1061683671
With a larger source template of 27254 bytes:
_HandlebarsHoganDust
Source272542725426820
Compiled JS456893927433657
Increase68%44%25%
Note that the Dust source templates are slightly smaller due to its delimiter syntax ({{..}} vs. {..}).
Performance
Performance measurements are done using jsPerf: for the small source template and the larger one. These charts indicate that Handlebars is the fastest to render precompiled templates.
Conclusions
  • 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.
About
Performance, footprint and configuration of template engines and precompiled templates
Resources
Readme
Activity
Stars
12 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages