Reduce application file size by introducing wrappers for JS Document/Element functions

[samcic]

I'd like to propose a potential improvement in the direction of performance/optimization and get some comments from the community. I understand this is the right repo for this kind of thing.

I work on a production Ember App. We're using up-to-date versions of the core stuff (Ember 2.6.0, Ember Data 2.6.1, jQuery 2.2.3, Ember CLI 2.6.1). The app uses a fair few components (not unusual I imagine).

The other day I happened to be perusing through the minified JS for our app's production build. I noticed that, as a result of Ember's delicious dynamic rendering of components, there were quite a few calls to JS functions in the source like the following:

• Element.setAttribute
• Document.createDocumentFragment
• Document.createElement
• Document.createComment
• Document.createTextNode
• Node.appendChild

The minification process can't reduce the names of these functions of course, so they really stand out when surrounded by e.g. minified variable names in the production build.

Now I'm not a JS expert, but I started wondering if, in the interest of reducing the JS download footprint, it would be possible to define wrapper functions for these functions. I'm thinking in the loose direction of defining something like Ember.sa=function(element, name, value){element.setAttribute(name,value);}.

To get a very rough feeling for its impact, I did a basic find/replace of the function names above with two-or-three letter abbreviated versions. The size of our minified script reduced by over 15%. With gzip compression this difference dropped to just over 5% (arguably still a worthwhile saving if the implementation effort is minimal). Of course the n=1 sample of our app is not exactly representative of the effect such a change would have on all Ember apps though.

Making such a change might also raise other questions, like: would the additional function call in each case introduce a significant performance overhead?

Before anybody wastes time focusing on the details, I just wanted to throw the idea out there and see if anyone else sees any merit in it (or show-stopping reasons not for doing this kind of thing).

[ghost]

Have you tried this with Glimmer 2 active? Glimmer 2 already reduces templates sizes to 20% of what it was before Glimmer 2. I suspect it might also already have fixed this.

[samcic]

Nope (honestly wasn't aware there was a Glimmer 2). Let me look into it.

[samcic]

You're probably right. Spending most of my time on developing the app, I haven't been overly active in contributing to the development of Ember itself (blush), so I'm struggling to quickly figure out how I enable Glimmer 2 to do a quick test. If you could point me in the right direction it'd be rad, otherwise I suggest we just close this and I'll have another look when Glimmer2 is shipped.

[stefanpenner]

Although the above looks great, it is unlikely the core team will work on this, as the glimmer 2's templates don't have the particular problem, and so far appear to be a pretty substantial file-size drop.

Now as with all software providing timelines is hard, but I can say with absolute confidence there will be no glimmer2 in a stable release this summer. Although we do hope to have testing builds available. Glimmer2 wont land before the next LTS release.

If someone is motivated, fleshes out the RFC and provides an implementation, there is a chance this could be included in releases before glimmer 2 lands, provided an interim improvement.

Honestly 5% savings doesn't personally motivate me, especially as something that wont provide value in a-few months.

if someone is motivated, i illustrated a path that may enable success. If not, we should most likely close this.

[samcic]

Agree that this should be closed. I wasn't aware of the Glimmer2 work at the time I posted this (sounds exciting). For the small difference my proposed change would make and the short time it would be in effect, it doesn't make much sense to invest the effort. Thanks anyway for listening to the idea!

[stefanpenner]

@samcic thank you for the great idea :)