Tree shake template literals

[KTibow]

Open demo

esbuild shouldn't ship bye in the bundle, it should only ship hi.

Now I know esbuild can't tell if t has side effects. However, while invoking t with PURE tree shakes, esbuild still doesn't tree shake the template literal no matter how much PUREing you do.

[hyrious]

Interestingly, rollup does not support pure annotation before tagged template literals too, related issue here: https://github.com/rollup/rollup/issues/4035

On the other hand, rollup does support /* @__NO_SIDE_EFFECTS__ */ to mark the function (instead of a call) as pure:

/* @__NO_SIDE_EFFECTS__ */
function func(foo) {
  console.log(foo)
}

var foo = func`literal`  // <-- tree shaked!

esbuild currently preserves this magic comment (changelog: 0.18.1), so I guess you can just use this way to write your code.

[evanw]

You can annotate any arbitrary expression as pure (including template literals) for all tools that support pure annotations (including esbuild and Rollup) by putting it in an IIFE.

[KTibow]

That's not as clean (or performant) as it being implemented in esbuild but that's definitely much better than nothing

[KTibow]

Also it's worth noting that Rollup

• if the function is a special case (v) => v or has no_side_effects: does tree shaking fine
• in other cases: just runs it as an expression instead of declaring a variable

[evanw]

With the latest release, esbuild will now inline IIFEs that return an expression when minifying, so there should no longer be any performance impact from doing this.