Benchmarking pure JS + top three templating engines on NPM

bench_template_engines.ts

import { Event, Suite } from "benchmark";
import * as ejs from "ejs";
import * as handlebars from "handlebars";
import * as nunjucks from "nunjucks";

const DATA = {
  greeting: "Hello",
  things: [
    { name: "Test", color: "red" },
    { name: "Boat", color: "blue" },
    { name: "Car", color: "yellow" },
  ],
};

const NUNJUCKS_TEMPLATE = nunjucks.compile(`
  {% for thing in things %}
    {{ greeting }}, {{ thing.name }} 👋
    Your color is: {{ thing.color }}
  {% endfor %}
`);

const TEMPLATES = {
  "js concat": (data: any) => {
    let result = "\n";
    for (const thing of data.things) {
      result += `${data.greeting}, ${thing.name} 👋\n`;
      result += `Your color is: ${thing.color};\n`;
    }
    return result;
  },

  "js join": (data: any) => {
    const result = [];
    for (const thing of data.things) {
      result.push(`${data.greeting}, ${thing.name} 👋\n`);
      result.push(`Your color is: ${thing.color};\n`);
    }
    return result.join("");
  },

  ejs: ejs.compile(`
  <% for(const thing of things) { %>
    <%- greeting %>, <%- thing.name %> 👋
    Your color is: <%- thing.color %>
  <% } %>
`),

  handlebars: handlebars.compile(`
  {{#each things}}
    {{ @root.greeting }}, {{ this.name }} 👋
    Your color is: {{ this.color }}
  {{/each}}
`),

  nunjucks: (data: any) => NUNJUCKS_TEMPLATE.render(data),
};

var suite = new Suite("template engines", { initCount: 1_000_000 });

for (const [name, template] of Object.entries(TEMPLATES)) {
  console.info(`--- ${name} ---\n`, template(DATA));
  suite.add(name, () => template(DATA));
}

console.info("Starting benchmark...");
suite
  .on("cycle", (event: Event) => {
    if (!event.target.stats) {
      throw new Error(`no stats for ${event.target.name}`);
    }

    const toMicro = (x: number) => {
      const v = (x * 1_000_000).toPrecision(2);
      return `${v}μs`;
    };

    console.log(`${event.target.name}: ${toMicro(event.target.stats.mean)} ± ${toMicro(event.target.stats.deviation)}`);
  })
  .on("complete", function (this: Suite, _event: Event) {
    console.log("\nFastest is " + this.filter("fastest").map("name"));
  })
  .run();