mirror of https://github.com/sveltejs/svelte
perf: deduplicate identical hoisted templates within a component (#18320)
Byte-identical templates hoisted from different fragments, elements, or branches now share a single `$.from_html` factory instead of each emitting its own module-scope variable - this shrinks generated output and avoids redundant runtime template parsing. Dedup is keyed on `(content, flags)` and is skipped in dev mode (templates there are wrapped in `$.add_locations`, which embeds per-call-site info). ### Before submitting the PR, please make sure you do the following - [ ] It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs - [x] Prefix your PR title with `feat:`, `fix:`, `chore:`, or `docs:`. - [x] This message body should clearly illustrate what problems it solves. - [x] Ideally, include a test that fails without this PR but passes with it. - [x] If this PR changes code within `packages/svelte/src`, add a changeset (`npx changeset`). ### Tests and linting - [x] Run the tests with `pnpm test` and lint the project with `pnpm lint` --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Rich Harris <rich.harris@vercel.com>pull/18322/head
Mathias Picker
2 days ago
committed by
GitHub
parent
a40c745fd9
commit
2fae91af6d
@ -0,0 +1,5 @@
|
||||
---
|
||||
'svelte': patch
|
||||
---
|
||||
|
||||
perf: deduplicate identical hoisted templates within a component
|
||||
@ -0,0 +1,44 @@
|
||||
import 'svelte/internal/disclose-version';
|
||||
import * as $ from 'svelte/internal/client';
|
||||
|
||||
var root = $.from_html(`<p class="x">hello</p>`);
|
||||
var root_1 = $.from_html(`<!> <!>`, 1);
|
||||
|
||||
export default function Dedupe_templates($$anchor, $$props) {
|
||||
var fragment = root_1();
|
||||
var node = $.first_child(fragment);
|
||||
|
||||
{
|
||||
var consequent = ($$anchor) => {
|
||||
var p = root();
|
||||
|
||||
$.append($$anchor, p);
|
||||
};
|
||||
|
||||
var alternate = ($$anchor) => {
|
||||
var p_1 = root();
|
||||
|
||||
$.append($$anchor, p_1);
|
||||
};
|
||||
|
||||
$.if(node, ($$render) => {
|
||||
if ($$props.a) $$render(consequent); else $$render(alternate, -1);
|
||||
});
|
||||
}
|
||||
|
||||
var node_1 = $.sibling(node, 2);
|
||||
|
||||
{
|
||||
var consequent_1 = ($$anchor) => {
|
||||
var p_2 = root();
|
||||
|
||||
$.append($$anchor, p_2);
|
||||
};
|
||||
|
||||
$.if(node_1, ($$render) => {
|
||||
if ($$props.b) $$render(consequent_1);
|
||||
});
|
||||
}
|
||||
|
||||
$.append($$anchor, fragment);
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import * as $ from 'svelte/internal/server';
|
||||
|
||||
export default function Dedupe_templates($$renderer, $$props) {
|
||||
let { a, b } = $$props;
|
||||
|
||||
if (a) {
|
||||
$$renderer.push('<!--[0-->');
|
||||
$$renderer.push(`<p class="x">hello</p>`);
|
||||
} else {
|
||||
$$renderer.push('<!--[-1-->');
|
||||
$$renderer.push(`<p class="x">hello</p>`);
|
||||
}
|
||||
|
||||
$$renderer.push(`<!--]--> `);
|
||||
|
||||
if (b) {
|
||||
$$renderer.push('<!--[0-->');
|
||||
$$renderer.push(`<p class="x">hello</p>`);
|
||||
} else {
|
||||
$$renderer.push('<!--[-1-->');
|
||||
}
|
||||
|
||||
$$renderer.push(`<!--]-->`);
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
let { a, b } = $props();
|
||||
</script>
|
||||
|
||||
<!-- identical static markup repeated across branches should share one hoisted template -->
|
||||
{#if a}
|
||||
<p class="x">hello</p>
|
||||
{:else}
|
||||
<p class="x">hello</p>
|
||||
{/if}
|
||||
|
||||
{#if b}
|
||||
<p class="x">hello</p>
|
||||
{/if}
|
||||
Loading…
Reference in new issue