[Perf] Hoist renderer properties to top-level module

[nolanlawson]

Instead of exposing renderer.ts as an object, all of its properties could be exported at the top level of a module. There is only one renderer in the built JS files for @lwc/engine-dom and @lwc/engine-server, so it's effectively a singleton.

Benefits:

• Smaller code size
• Avoid future regressions as described in perf: optimize isHydrating #2562
• No need to attach the renderer object to the VM or look it up
• The minifier can do dead-code elimination for e.g. if (renderer.ssr) {}, which is always false in @lwc/engine-dom

In a quick proof-of-concept (0003d50), this reduced the Brotli-compressed size of iife/es2017/engine-dom.min.js from 14.8 kB to 14.3 kB (-0.5kB). Plus it shows a decent improvement across the benchmarks, especially for server rendering:

The tricky part is just figuring out how to structure the code and get the TypeScript types right. The PoC uses a dummy @lwc/engine-impl package, plus a Rollup plugin to replace it at build time, but maybe there's a cleaner way.

[caridy]

If I understand this proposal, you're saying that having all the DOM operations to be in its own package, where each implementation (dom) or (ssr) will be importing different versions of those packages? Can you elaborate more? the POC was too big to get a simple idea.

[nolanlawson]

@caridy Yes, here is the basic idea:

// @lwc/engine-core/some-file.ts
import { createElement } from '__lwc-renderer__'; 

// @lwc/engine-dom/renderer.ts
export { createElement };

// @lwc/engine-server/renderer.ts
export { createElement };

In the above example, Rollup would be responsible for substituting __lwc-renderer__ at build-time with either the engine-dom renderer or the engine-server renderer.

This way, in the built JS file, there is no actual renderer object. There is just a bunch of constants (strings, booleans, functions) at the top level.

[pmdartus]

I am wondering if the added build and typing complexity is worth the 1% runtime performance boost.
That said it is quite interesting that the SSR benchmarks benefit more than the other benchmarks.