Skip to content

perf: improve VNode creation performance with compiler hints #3334

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.

Sign up for GitHub

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

Merged
merged 16 commits into from
Jun 22, 2021
Merged

perf: improve VNode creation performance with compiler hints #3334

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
7d15862
wip: initial work for vnode creation
HcySunYang Mar 1, 2021
801c72e
test: update snapshots
HcySunYang Mar 1, 2021
daa3598
chore: comments
HcySunYang Mar 1, 2021
fe4347c
feat: introduce createPlainVnode
HcySunYang Mar 2, 2021
ad4b7ae
fix: treat constant style or clase as not requiring normalization
HcySunYang Mar 2, 2021
e2d0b8c
feat: simplify implementation
HcySunYang Mar 3, 2021
c2ab22f
chore: fix snapshots
HcySunYang Mar 9, 2021
c632d90
chore: resolve conflicts
HcySunYang Mar 28, 2021
0df05f4
refactor: use getVNodeHelper and getVNodeBlockHelper
HcySunYang Mar 28, 2021
0b41b38
chore: rename forSSR to inSSR
HcySunYang Mar 28, 2021
255ef59
fix: tests
HcySunYang May 10, 2021
5f85951
fix: tests
HcySunYang May 28, 2021
b813a03
chore: Merge branch '3.2' into improve-vnode-creation-perf
yyx990803 Jun 22, 2021
c8d1034
chore: fix merged test
yyx990803 Jun 22, 2021
6745f6b
refactor: remove createComponentVNode, merge methods into createBaseV…
yyx990803 Jun 22, 2021
aaa7325
refactor: remove shapeFlag pre-normalization
yyx990803 Jun 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: remove createComponentVNode, merge methods into createBaseV… 
…Node
  • Loading branch information
@yyx990803
yyx990803 committed Jun 22, 2021
commit 6745f6ba8662e1b01b27ba784a7445361bd38f71
12 changes: 6 additions & 6 deletions packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`;

exports[`scopeId compiler support should wrap default slot 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")

export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
const _component_Child = _resolveComponent(\\"Child\\")

return (_openBlock(), _createComponentBlock(_component_Child, null, {
return (_openBlock(), _createBlock(_component_Child, null, {
default: _withId(() => [
_createElementVNode(\\"div\\")
]),
Expand All @@ -35,13 +35,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`;

exports[`scopeId compiler support should wrap dynamic slots 1`] = `
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
"import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")

export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
const _component_Child = _resolveComponent(\\"Child\\")

return (_openBlock(), _createComponentBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"foo\\",
Expand All @@ -63,13 +63,13 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`;

exports[`scopeId compiler support should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createComponentBlock as _createComponentBlock, withScopeId as _withScopeId } from \\"vue\\"
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")

export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
const _component_Child = _resolveComponent(\\"Child\\")

return (_openBlock(), _createComponentBlock(_component_Child, null, {
return (_openBlock(), _createBlock(_component_Child, null, {
foo: _withId(({ msg }) => [
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]),
Expand Down
14 changes: 7 additions & 7 deletions packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,19 +132,19 @@ return function render(_ctx, _cache) {

exports[`compiler: hoistStatic transform hoist static props for elements with unhoistable children 1`] = `
"const _Vue = Vue
const { createElementVNode: _createElementVNode } = _Vue
const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue

const _hoisted_1 = { id: \\"foo\\" }

return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const { resolveComponent: _resolveComponent, createVNode: _createVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"div\\", _hoisted_1, [
_createComponentVNode(_component_Comp)
_createVNode(_component_Comp)
], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */)
], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
}
Expand Down Expand Up @@ -241,11 +241,11 @@ exports[`compiler: hoistStatic transform prefixIdentifiers should NOT hoist expr

return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
const { toDisplayString: _toDisplayString, createTextVNode: _createTextVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */)
]),
Expand Down Expand Up @@ -294,12 +294,12 @@ exports[`compiler: hoistStatic transform should NOT hoist components 1`] = `

return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const { resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createComponentVNode(_component_Comp)
_createVNode(_component_Comp)
], null, null, 17 /* ELEMENT, ARRAY_CHILDREN */))
}
}"
Expand Down
4 changes: 2 additions & 2 deletions packages/compiler-core/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@ exports[`compiler: v-once transform on component 1`] = `

return function render(_ctx, _cache) {
with (_ctx) {
const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
const { setBlockTracking: _setBlockTracking, resolveComponent: _resolveComponent, createVNode: _createVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createElementBlock(\\"div\\", null, [
_cache[1] || (
_setBlockTracking(-1),
_cache[1] = _createComponentVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_cache[1] = _createVNode(_component_Comp, { id: foo }, null, 8 /* PROPS */, [\\"id\\"]),
_setBlockTracking(1),
_cache[1]
)
Expand Down
62 changes: 31 additions & 31 deletions packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`compiler: transform component slots dynamically named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.one]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
[_ctx.two]: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
_: 2 /* DYNAMIC */
Expand All @@ -15,12 +15,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots implicit default slot 1`] = `
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(() => [
_createElementVNode(\\"div\\")
]),
Expand All @@ -30,12 +30,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots named slot with v-for w/ prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, renderList: _renderList, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(_ctx.list, (name) => {
return {
name: name,
Expand All @@ -47,12 +47,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots named slot with v-if + prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
(_ctx.ok)
? {
name: \\"one\\",
Expand All @@ -68,11 +68,11 @@ exports[`compiler: transform component slots named slot with v-if + v-else-if +

return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok
? {
name: \\"one\\",
Expand All @@ -97,11 +97,11 @@ exports[`compiler: transform component slots named slot with v-if 1`] = `

return function render(_ctx, _cache) {
with (_ctx) {
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
const { resolveComponent: _resolveComponent, withCtx: _withCtx, createSlots: _createSlots, openBlock: _openBlock, createBlock: _createBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _: 2 /* DYNAMIC */ }, [
ok
? {
name: \\"one\\",
Expand All @@ -118,11 +118,11 @@ exports[`compiler: transform component slots named slots w/ implicit default slo

return function render(_ctx, _cache) {
with (_ctx) {
const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = _Vue
const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue

const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(() => [\\"foo\\"]),
default: _withCtx(() => [
\\"bar\\",
Expand All @@ -135,15 +135,15 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots nested slots scoping 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createComponentVNode: _createComponentVNode, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Inner = _resolveComponent(\\"Inner\\")
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [
_createComponentVNode(_component_Inner, null, {
_createVNode(_component_Inner, null, {
default: _withCtx(({ bar }) => [_toDisplayString(foo), _toDisplayString(bar), _toDisplayString(_ctx.baz)]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */),
Expand All @@ -158,51 +158,51 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots on component dynamically named slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
[_ctx.named]: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
_: 2 /* DYNAMIC */
}, 1024 /* DYNAMIC_SLOTS */))
}"
`;

exports[`compiler: transform component slots on component named slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
named: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
_: 1 /* STABLE */
}))
}"
`;

exports[`compiler: transform component slots on-component default slot 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
default: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
_: 1 /* STABLE */
}))
}"
`;

exports[`compiler: transform component slots template named slots 1`] = `
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { toDisplayString: _toDisplayString, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
one: _withCtx(({ foo }) => [_toDisplayString(foo), _toDisplayString(_ctx.bar)]),
two: _withCtx(({ bar }) => [_toDisplayString(_ctx.foo), _toDisplayString(bar)]),
_: 1 /* STABLE */
Expand All @@ -211,12 +211,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots with whitespace: 'preserve' implicit default slot 1`] = `
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
default: _withCtx(() => [
\\" \\",
Expand All @@ -228,12 +228,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots with whitespace: 'preserve' named default slot + implicit whitespace content 1`] = `
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
default: _withCtx(() => [\\" Default \\"]),
_: 1 /* STABLE */
Expand All @@ -242,12 +242,12 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: transform component slots with whitespace: 'preserve' should not generate whitespace only default slot 1`] = `
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createComponentBlock: _createComponentBlock } = Vue
"const { resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = Vue

return function render(_ctx, _cache) {
const _component_Comp = _resolveComponent(\\"Comp\\")

return (_openBlock(), _createComponentBlock(_component_Comp, null, {
return (_openBlock(), _createBlock(_component_Comp, null, {
header: _withCtx(() => [\\" Header \\"]),
footer: _withCtx(() => [\\" Footer \\"]),
_: 1 /* STABLE */
Expand Down
Loading