Why is the output filesize less using bel directly than with yo-yo?

[nichoth]

// index-yo.js
var yo = require('yo-yo')
var msg = 'hello!'
var element = yo`<div>${msg}</div>`

// index-bel.js
var bel = require('bel')
var msg = 'hello!'
var element = bel`<div>${msg}</div>`

$ browserify index-yo.js -t yo-yoify | wc -c
    35020

$ browserify index-bel.js -t yo-yoify | wc -c
    1618

[shama]

This transform knows to replace var bel = require('bel') with var bel = 0, omitting those dependencies from the final build.

yo-yo has yo.update so we can't remove that dependency. We can optimize it further by diving into yo-yo and removing bel as a dependency though. But perf and browser compat were my first priority.

[nichoth]

Yes sorry probably shouldn't submit issues late at night — realized yo has morphdom as a dep also. Interesting why hyperx is included in the yo bundle but not the bel bundle.

[shama]

I think as soon as you set it to var bel = 0, Browserify skips those deps and all child deps. So with yo-yo, it still has the require('bel') which will include those deps.

[shama]

@nichoth Give this a try: browserify index-yo.js -g yo-yoify | wc -c as that will apply the transform globally including inside of yo-yo which will remove bel and hyperx as a deps.

[nichoth]

Thanks @shama! Nice trick with browserify. No more hyperx in the bundle.

[shama]

Fixed with b24965e116079f13267cbe8328ff9c260ba437b3. This is becoming a plugin that always applies globally and only includes the appendChild function once per build.