perf: optimize non-reactive if statements

Author: benmccann

.changeset/khaki-jobs-smoke.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+perf: optimize non-reactive if statements

packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js

@@ -8,12 +8,25 @@ import * as b from '../../../../utils/builders.js';
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
-	context.state.template.push_quasi('<!>');
+	const { state } = context;
 
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
 
+	// compile to if rather than $.if for non-reactive if statements
+	// NOTE: this only handles expressions that are simple identifiers and doesn't handle else/elseif yet
+	if (state.analysis.runes && node.test.type === 'Identifier' && !(node.alternate || node.elseif)) {
+		const binding = state.scope.owner(node.test.name)?.declarations.get(node.test.name);
+		if (binding?.kind === 'normal') {
+			consequent.body.unshift(b.var(b.id('$$anchor'), state.node));
+			state.init.push(b.if(node.test, consequent));
+			return;
+		}
+	}
+
+	state.template.push_quasi('<!>');
+
 	const args = [
-		context.state.node,
+		state.node,
 		b.thunk(/** @type {Expression} */ (context.visit(node.test))),
 		b.arrow([b.id('$$anchor')], consequent)
 	];
@@ -51,5 +64,5 @@ export function IfBlock(node, context) {
 		args.push(b.literal(true));
 	}
 
-	context.state.init.push(b.stmt(b.call('$.if', ...args)));
+	state.init.push(b.stmt(b.call('$.if', ...args)));
 }

packages/svelte/tests/snapshot/samples/non-reactive-control-structures/_expected/client/index.svelte.js

@@ -0,0 +1,28 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+var root = $.template(` <!>`, 1);
+
+export default function Non_reactive_control_structures($$anchor) {
+	const a = true;
+	let b = true;
+	var fragment = root();
+	var node = $.first_child(fragment);
+
+	if (a) {
+		var $$anchor = node;
+		var text = $.text("hello");
+
+		$.append($$anchor, text);
+	}
+
+	var node_1 = $.sibling(node, 2);
+
+	$.if(node_1, () => b, ($$anchor) => {
+		var text_1 = $.text("world");
+
+		$.append($$anchor, text_1);
+	});
+
+	$.append($$anchor, fragment);
+}

packages/svelte/tests/snapshot/samples/non-reactive-control-structures/_expected/server/index.svelte.js

@@ -0,0 +1,24 @@
+import * as $ from "svelte/internal/server";
+
+export default function Non_reactive_control_structures($$payload) {
+	const a = true;
+	let b = true;
+
+	if (a) {
+		$$payload.out += "<!--[-->";
+		$$payload.out += `hello`;
+	} else {
+		$$payload.out += "<!--[!-->";
+	}
+
+	$$payload.out += `<!--]--> `;
+
+	if (b) {
+		$$payload.out += "<!--[-->";
+		$$payload.out += `world`;
+	} else {
+		$$payload.out += "<!--[!-->";
+	}
+
+	$$payload.out += `<!--]-->`;
+}

packages/svelte/tests/snapshot/samples/non-reactive-control-structures/index.svelte

@@ -0,0 +1,14 @@
+<svelte:options runes={true} />
+
+<script>
+	const a = true;
+	let b = $state(true);
+</script>
+
+{#if a}
+  hello
+{/if}
+
+{#if b}
+  world
+{/if}