Compiled HTMLBars (a lot) bigger than Handlebars?

1

I upgraded to Ember 1.10.0 yesterday, and I was surprised to find that my compiled templates file grew almost 2.5 times its previous size. My previous templates file was 1.8 M, minified 536K. New file: 4.4 M, minified: 2.4 M. Is there something I should be doing to my Handlebars templates to make them more “HTMLBars friendly” so this file isn’t so incredibly enormous? I was pretty ok with a 536K file that I served once and cached for as long as was prudent. I’m not sure I’m prepared to do that with a 2.4 M file.

2

I ran a quick comparison (maybe it’s not fair) between Handlebars and HTMLBars production output in Ember CLI. It is looking at the default application template between Ember 1.9.1 and 1.10.0:

The numbers represent the packed, minified size and the beautified lines of code, so you can get a rough idea of size if you don’t like using bytes as a measurement.

Ember 1.9.1 (Handlebars) 481 bytes, ≈ 15 LOC (beautified)

define("trill/templates/application", ["exports", "ember"], function(e, t) {
  "use strict";
  e["default"] = t["default"].Handlebars.template(function(e, i, r, n, l) {
    this.compilerInfo = [4, ">= 1.0.0"], r = this.merge(r, t["default"].Handlebars.helpers), l = l || {};
    var a, o = "";
    return l.buffer.push('<h2 id="title">Welcome to Ember.js</h2>\n\n'), a = r._triageMustache.call(i, "outlet", {
      hash: {},
      hashTypes: {},
      hashContexts: {},
      contexts: [i],
      types: ["ID"],
      data: l
    }), (a || 0 === a) && l.buffer.push(a), l.buffer.push("\n"), o
  })
})

Ember 1.10.0 (HTMLBars) 854 bytes, ≈ 32 LOC (beautified)

define("trill/templates/application", ["exports"], function(e) {
  "use strict";
  e["default"] = Ember.HTMLBars.template(function() {
    return {
      isHTMLBars: !0,
      blockParams: 0,
      cachedFragment: null,
      hasRendered: !1,
      build: function(e) {
        var t = e.createDocumentFragment(),
          i = e.createElement("h2");
        e.setAttribute(i, "id", "title");
        var r = e.createTextNode("Welcome to Ember.js");
        e.appendChild(i, r), e.appendChild(t, i);
        var i = e.createTextNode("\n\n");
        e.appendChild(t, i);
        var i = e.createTextNode("\n");
        return e.appendChild(t, i), t
      },
      render: function(e, t, i) {
        var r = t.dom,
          n = t.hooks,
          a = n.content;
        r.detectNamespace(i);
        var l;
        t.useFragmentCache && r.canClone ? (null === this.cachedFragment && (l = this.build(r), this.hasRendered ? this.cachedFragment = l : this.hasRendered = !0), this.cachedFragment && (l = r.cloneNode(this.cachedFragment, !0))) : l = this.build(r);
        var o = r.createMorphAt(l, 1, 2, i);
        return a(t, o, e, "outlet"), l
      }
    }
  }())
})

This comparison shows a ±56% (in bytes) between the two standards.

If this isn’t already an issue on the Ember GitHub, I will make one.

Update:

Here is a link to the issue: https://github.com/emberjs/ember.js/issues/10454

Another Update:

@mmun suggested a gzipped comparison.

Ember 1.9.1 (Handlebars) 360 bytes, compressed, gzip

Ember 1.10.0 (HTMLBars) 479 bytes, compressed, gzip