SFC compiler: hoist constant literals

[jods4]

This is a proposed optimization to the Vue compiler

What?

I suggest that Vue compiler should detect if a bound value is a constant (i.e. an array or an object literals whose values are themselves only constants) and hoist those values into const variables.

For instance, consider this template:

<div :title="a" :class="{ r: true, g: true, b: false }" />

Here's the current and suggested compiled render functions:

// Current PROD build

const __sfc__ = {
  __name: 'App',
  props: { a: String },
  setup(__props) {
    return (_ctx, _cache) => {
      return (_openBlock(), _createElementBlock("div", {
        title: __props.a,
-       class: _normalizeClass({ red: true, blue: true, green: false })
      }, null, 8 /* PROPS */, _hoisted_1))
    }
  }
}

// Suggested compiled code

const __sfc__ = {
  __name: 'App',
  props: { a: String },
  setup(__props) {
+   const _hoisted_2 = { red: true, blue: true, green: false };
    return (_ctx, _cache) => {
      return (_openBlock(), _createElementBlock("div", {
        title: __props.a,
+       class: _normalizeClass(_hoisted_2)
      }, null, 8 /* PROPS */, _hoisted_1))
    }
  }
}

This shouldn't require a lot of work, as analyzing bindings for "const-ness" is already performed by Vue compiler to support hoisting elements. Remove the title binding in this example and the whole div is hoisted!

Why?

For perf, of course.
This has two benefits:

1. It makes the render function faster, as it doesn't need to allocate and init an object every time it runs. It simply re-uses cached instances.
2. It can avoid unnecessary re-renders. Inside Vue, objects are compared by reference, not by value. If you bind an object literal to a directive or component props, every time the template renders, Vue thinks that the props value has changed (well, actually it has changed: it's a new instance!). So even though the values are all the same, this will trigger an update of the directive, or an update of the component.

When?

This can be more common than you'd think, for example:

• A directive that takes more than a value, will almost always accept an object of options. Sometimes those options are static.
• The recently released motion-v library is using complex props that are constant object literals 90% of the time.

And in my experience I see almost nobody "manually" hoisting theses options into setup constants, i.e. writing:

<motion.div :initial="divInitial" />
instead of:
<motion.div :initial="{ scale: 0.8, opacity: 0 }" />

[edison1105]

I think this would be better.

const __sfc__ = {
  __name: 'App',
  props: { a: String },
  setup(__props) {
    return (_ctx, _cache) => {
      return (_openBlock(), _createElementBlock("div", {
        title: __props.a,
+       class: _cache._hoisted_2 || (_cache._hoisted_2 = _normalizeClass({ red: ctx.foo, blue: true, green: false }))
      }, null, 8 /* PROPS */, _hoisted_1))
    }
  }
}

[jods4]

For sure!
This is an edge case because I bound class, which introduces an internal _normalizeClass call. I did not want to complicate things too much -- and it's not relevant to most props -- but if it could be handled by compiler that would be even better, I agree.