perf: support only attaching slot scope ids when necessary

This is done by adding the `slotted: false` option to:

- compiler-dom
- compiler-ssr
- compiler-sfc (forwarded to template compiler)

At runtime, only slotted component will render slot fragments with
slot scope Ids. For SSR, only slotted component will add slot scope Ids
to rendered slot content. This should improve both runtime performance
and reduce SSR rendered markup size.

Note: requires SFC tooling (e.g. `vue-loader` and `vite`) to pass on
the `slotted` option from the SFC descriptoer to the `compileTemplate`
call.
This commit is contained in:
Evan You
2021-03-05 12:12:49 -05:00
parent f74b16ccfe
commit 02cbbb718c
11 changed files with 110 additions and 31 deletions

View File

@@ -25,7 +25,8 @@ export function renderSlot(
props: Data = {},
// this is not a user-facing function, so the fallback is always generated by
// the compiler and guaranteed to be a function returning an array
fallback?: () => VNodeArrayChildren
fallback?: () => VNodeArrayChildren,
hasSlotted?: boolean
): VNode {
let slot = slots[name]
@@ -53,8 +54,7 @@ export function renderSlot(
? PatchFlags.STABLE_FRAGMENT
: PatchFlags.BAIL
)
// TODO (optimization) only add slot scope id if :slotted is used
if (rendered.scopeId) {
if (hasSlotted && rendered.scopeId) {
rendered.slotScopeIds = [rendered.scopeId + '-s']
}
isRenderingCompiledSlot--