Skip to content

Commit

Permalink
perf: improve VNode creation performance with compiler hints (#3334)
Browse files Browse the repository at this point in the history
  • Loading branch information
HcySunYang authored and yyx990803 committed Jul 16, 2021
1 parent 31abdc8 commit ceff899
Show file tree
Hide file tree
Showing 42 changed files with 1,130 additions and 685 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,12 @@ exports[`compiler: codegen Element (callExpression + objectExpression + Template
"
return function render(_ctx, _cache) {
with (_ctx) {
return _createVNode(\\"div\\", {
return _createElementVNode(\\"div\\", {
id: \\"foo\\",
[prop]: bar,
[foo + bar]: bar
}, [
_createVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
_createElementVNode(\\"p\\", { \\"some-key\\": \\"foo\\" })
], 16)
}
}"
Expand Down Expand Up @@ -98,7 +98,7 @@ exports[`compiler: codegen forNode 1`] = `
"
return function render(_ctx, _cache) {
with (_ctx) {
return (_openBlock(true), _createBlock(_Fragment, null, _renderList(), 1))
return (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(), 1))
}
}"
`;
Expand All @@ -107,7 +107,7 @@ exports[`compiler: codegen forNode with constant expression 1`] = `
"
return function render(_ctx, _cache) {
with (_ctx) {
return (_openBlock(), _createBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */))
return (_openBlock(), _createElementBlock(_Fragment, null, _renderList(), 64 /* STABLE_FRAGMENT */))
}
}"
`;
Expand Down
48 changes: 24 additions & 24 deletions packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@ exports[`compiler: integration tests function mode 1`] = `
return function render(_ctx, _cache) {
with (_ctx) {
const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createVNode: _createVNode } = _Vue
const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = _Vue
return (_openBlock(), _createBlock(\\"div\\", {
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
class: bar.baz
class: _normalizeClass(bar.baz)
}, [
_createTextVNode(_toDisplayString(world.burn()) + \\" \\", 1 /* TEXT */),
ok
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
Expand All @@ -28,45 +28,45 @@ return function render(_ctx, _cache) {
`;

exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`] = `
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createVNode: _createVNode } = Vue
"const { toDisplayString: _toDisplayString, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, createTextVNode: _createTextVNode, Fragment: _Fragment, renderList: _renderList, createElementVNode: _createElementVNode, normalizeClass: _normalizeClass } = Vue
return function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"div\\", {
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
class: _ctx.bar.baz
class: _normalizeClass(_ctx.bar.baz)
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
(_ctx.ok)
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
}"
`;

exports[`compiler: integration tests module mode 1`] = `
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createVNode as _createVNode } from \\"vue\\"
"import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, createTextVNode as _createTextVNode, Fragment as _Fragment, renderList as _renderList, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from \\"vue\\"
export function render(_ctx, _cache) {
return (_openBlock(), _createBlock(\\"div\\", {
return (_openBlock(), _createElementBlock(\\"div\\", {
id: \\"foo\\",
class: _ctx.bar.baz
class: _normalizeClass(_ctx.bar.baz)
}, [
_createTextVNode(_toDisplayString(_ctx.world.burn()) + \\" \\", 1 /* TEXT */),
(_ctx.ok)
? (_openBlock(), _createBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createBlock(_Fragment, { key: 1 }, [
? (_openBlock(), _createElementBlock(\\"div\\", { key: 0 }, \\"yes\\"))
: (_openBlock(), _createElementBlock(_Fragment, { key: 1 }, [
_createTextVNode(\\"no\\")
], 2112 /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */)),
(_openBlock(true), _createBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(_ctx.list, (value, index) => {
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_createElementVNode(\\"span\\", null, _toDisplayString(value + index), 1 /* TEXT */)
]))
}), 256 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */))
Expand Down
22 changes: 11 additions & 11 deletions packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
"import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
const _withId = /*#__PURE__*/_withScopeId(\\"test\\")
_pushScopeId(\\"test\\")
const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
_popScopeId()
export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
return (_openBlock(), _createBlock(\\"div\\", null, [
return (_openBlock(), _createElementBlock(\\"div\\", null, [
_hoisted_1,
_createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
_hoisted_2
Expand All @@ -19,23 +19,23 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`;

exports[`scopeId compiler support should wrap default slot 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, 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(), _createBlock(_component_Child, null, {
default: _withId(() => [
_createVNode(\\"div\\")
_createElementVNode(\\"div\\")
]),
_: 1 /* STABLE */
}))
})"
`;

exports[`scopeId compiler support should wrap dynamic slots 1`] = `
"import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, 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) => {
Expand All @@ -46,15 +46,15 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
? {
name: \\"foo\\",
fn: _withId(() => [
_createVNode(\\"div\\")
_createElementVNode(\\"div\\")
])
}
: undefined,
_renderList(_ctx.list, (i) => {
return {
name: i,
fn: _withId(() => [
_createVNode(\\"div\\")
_createElementVNode(\\"div\\")
])
}
})
Expand All @@ -63,7 +63,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
`;

exports[`scopeId compiler support should wrap named slots 1`] = `
"import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, 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) => {
Expand All @@ -74,7 +74,7 @@ export const render = /*#__PURE__*/_withId((_ctx, _cache) => {
_createTextVNode(_toDisplayString(msg), 1 /* TEXT */)
]),
bar: _withId(() => [
_createVNode(\\"div\\")
_createElementVNode(\\"div\\")
]),
_: 1 /* STABLE */
}))
Expand Down
27 changes: 14 additions & 13 deletions packages/compiler-core/__tests__/codegen.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import {
RESOLVE_COMPONENT,
CREATE_COMMENT,
FRAGMENT,
RENDER_LIST
RENDER_LIST,
CREATE_ELEMENT_VNODE
} from '../src/runtimeHelpers'
import { createElementWithCodegen, genFlagText } from './testUtils'
import { PatchFlags } from '@vue/shared'
Expand Down Expand Up @@ -395,12 +396,12 @@ describe('compiler: codegen', () => {
})
)
expect(code).toMatch(`
return _${helperNameMap[CREATE_VNODE]}("div", {
return _${helperNameMap[CREATE_ELEMENT_VNODE]}("div", {
id: "foo",
[prop]: bar,
[foo + bar]: bar
}, [
_${helperNameMap[CREATE_VNODE]}("p", { "some-key": "foo" })
_${helperNameMap[CREATE_ELEMENT_VNODE]}("p", { "some-key": "foo" })
], ${PatchFlags.FULL_PROPS})`)
expect(code).toMatchSnapshot()
})
Expand Down Expand Up @@ -658,43 +659,43 @@ describe('compiler: codegen', () => {

test('tag only', () => {
expect(genCode(createVNodeCall(null, `"div"`))).toMatchInlineSnapshot(`
"return _createVNode(\\"div\\")
"return _createElementVNode(\\"div\\")
"
`)
expect(genCode(createVNodeCall(null, FRAGMENT))).toMatchInlineSnapshot(`
"return _createVNode(_Fragment)
"return _createElementVNode(_Fragment)
"
`)
})

test('with props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps)))
.toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", { foo: \\"bar\\" })
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" })
"
`)
})

test('with children, no props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, mockChildren)))
.toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", null, children)
"return _createElementVNode(\\"div\\", null, children)
"
`)
})

test('with children + props', () => {
expect(genCode(createVNodeCall(null, `"div"`, mockProps, mockChildren)))
.toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", { foo: \\"bar\\" }, children)
"return _createElementVNode(\\"div\\", { foo: \\"bar\\" }, children)
"
`)
})

test('with patchFlag and no children/props', () => {
expect(genCode(createVNodeCall(null, `"div"`, undefined, undefined, '1')))
.toMatchInlineSnapshot(`
"return _createVNode(\\"div\\", null, null, 1)
"return _createElementVNode(\\"div\\", null, null, 1)
"
`)
})
Expand All @@ -714,7 +715,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return (_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
"return (_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
"
`)
})
Expand All @@ -735,7 +736,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return (_openBlock(true), _createBlock(\\"div\\", { foo: \\"bar\\" }, children))
"return (_openBlock(true), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children))
"
`)
})
Expand All @@ -754,7 +755,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return _withDirectives(_createVNode(\\"div\\", { foo: \\"bar\\" }, children), [
"return _withDirectives(_createElementVNode(\\"div\\", { foo: \\"bar\\" }, children), [
[foo, bar]
])
"
Expand All @@ -776,7 +777,7 @@ describe('compiler: codegen', () => {
)
)
).toMatchInlineSnapshot(`
"return _withDirectives((_openBlock(), _createBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
"return _withDirectives((_openBlock(), _createElementBlock(\\"div\\", { foo: \\"bar\\" }, children)), [
[foo, bar]
])
"
Expand Down
4 changes: 2 additions & 2 deletions packages/compiler-core/__tests__/scopeId.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,10 @@ describe('scopeId compiler support', () => {
expect(code).toMatch(
[
`_pushScopeId("test")`,
`const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "hello", ${genFlagText(
`const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
PatchFlags.HOISTED
)})`,
`const _hoisted_2 = /*#__PURE__*/_createVNode("div", null, "world", ${genFlagText(
`const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
PatchFlags.HOISTED
)})`,
`_popScopeId()`
Expand Down
20 changes: 16 additions & 4 deletions packages/compiler-core/__tests__/testUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@ import {
ElementTypes,
VNodeCall
} from '../src'
import { isString, PatchFlags, PatchFlagNames, isArray } from '@vue/shared'
import {
isString,
PatchFlags,
PatchFlagNames,
isArray,
ShapeFlags
} from '@vue/shared'

const leadingBracketRE = /^\[/
const bracketsRE = /^\[|\]$/g
Expand Down Expand Up @@ -63,19 +69,25 @@ export function createElementWithCodegen(
directives: undefined,
isBlock: false,
disableTracking: false,
isComponent: false,
shapeFlag: ShapeFlags.ELEMENT + ``,
loc: locStub
}
}
}

export function genFlagText(flag: PatchFlags | PatchFlags[]) {
type Flags = PatchFlags | ShapeFlags
export function genFlagText(
flag: Flags | Flags[],
names: { [k: number]: string } = PatchFlagNames
) {
if (isArray(flag)) {
let f = 0
flag.forEach(ff => {
f |= ff
})
return `${f} /* ${flag.map(f => PatchFlagNames[f]).join(', ')} */`
return `${f} /* ${flag.map(f => names[f]).join(', ')} */`
} else {
return `${flag} /* ${PatchFlagNames[flag]} */`
return `${flag} /* ${names[flag]} */`
}
}
Loading

0 comments on commit ceff899

Please sign in to comment.