Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(compiler-core): change node hoisting to caching per instance #11067

Merged
merged 9 commits into from
Jun 4, 2024

Conversation

yyx990803
Copy link
Member

@yyx990803 yyx990803 commented Jun 4, 2024

close #5256
close #9219
close #10959

Node hoisting has created various issues in the past. Most notably in some cases it can cause the first owner instance to be kept in memory forever (#5256).

The original intention of node hoisting is so that we can (1) reuse the same nodes and avoid re-creating them on each update, and (2) provide a fast path for runtime diffing.

Notably this has always been flawed because Vue's vdom algorithm requires attaching the actual DOM to the VNode, so we are cloning a copy of each hoisted node for each component instance. This is no different from caching-per-instance but leads to the memory issue described above.

With this PR:

  • Cached nodes are now stored per instance and garbage collected when instance unmounts.
  • Cached nodes are lazy-created on first render (addresses the same problem perf: lazy init hoisted vnodes #10959 is attempting to fix)
  • Some logic around scopeId handling for hoisted nodes has been removed because it is no longer needed
  • Caching logic has also been improved to handle arrays returned by slots.

Given the template:

<div>
  <div>hello</div>
  <div>hello</div>
</div>

Before:

const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */)
const _hoisted_3 = [
  _hoisted_1,
  _hoisted_2
]
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, [..._hoisted_3]))
}

After:

function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", null, _cache[0] || (_cache[0] = [
    _createElementVNode("div", null, "hello", -1 /* CACHED */),
    _createElementVNode("div", null, "hello", -1 /* CACHED */)
  ])))
}

The generated code will look quite different after this change (see the many snapshot changes), but should be fully backwards compatible. That said this is some significant change to codegen so we are putting it in a minor to give it some alpha/beta testing time.

Other Internal Changes

  • hoistStatic.ts file renamed to cacheStatic.ts. The public option hoistStatic is preserved for backwards compatibility.
  • PatchFlags.HOISTED -> PatchFlags.CACHED
  • stringifyStatic logic has undergone some big changes but should remain compatible.
  • RootNode.cached and TransformContext.cached are now arrays of cached nodes (null in the case of v-memo)

Copy link

github-actions bot commented Jun 4, 2024

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 94.3 kB (+3.29 kB) 35.6 kB (+998 B) 32.1 kB (+872 B)
vue.global.prod.js 152 kB (+4.28 kB) 55.1 kB (+1.32 kB) 49.2 kB (+1.15 kB)

Usages

Name Size Gzip Brotli
createApp 54.1 kB (+3.17 kB) 20.9 kB (+996 B) 19 kB (+844 B)
createSSRApp 57.5 kB (+3.17 kB) 22.3 kB (+980 B) 20.2 kB (+830 B)
defineCustomElement 56.4 kB (+3.17 kB) 21.7 kB (+1 kB) 19.7 kB (+808 B)
overall 68 kB (+3.26 kB) 25.9 kB (+973 B) 23.5 kB (+834 B)

@yyx990803
Copy link
Member Author

/ecosystem-ci run

@vue-bot

This comment was marked as outdated.

@yyx990803
Copy link
Member Author

/cc @huang-julien

Nuxt has one test case failing here https://github.com/vuejs/ecosystem-ci/actions/runs/9365657120/job/25781312030#step:7:1279 because there are no longer pushScopeId calls for hoisted nodes. I think line 118 and 121 can be removed.

@yyx990803 yyx990803 merged commit cd0ea0d into minor Jun 4, 2024
11 checks passed
@yyx990803 yyx990803 deleted the hoist-to-cache branch June 4, 2024 12:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants