perf: optimize imports that are not mutated or reassigned

[benmccann]

closes #8933

This is especially useful for generating smaller code when using Vite's asset imports. This is not especially useful yet if using an Image.svelte component as that still won't be optimized, but if using the import directly or via a proposed preprocessor (sveltejs/kit#9787 (comment)) it will greatly reduce the size of the generated code

[dummdidumm]

I vaguely remember that @tanhauhau tried something similar in the context of not rerunning $: at one point, but it resulted in false negatives (i.e., $: wasn't rerunning as expected anymore). I'm not sure if this is related or different since it only applies to primitive constant values.

[benmccann]

Hmm. I couldn't really find anything like that in his PR history - though maybe I missed it. Could #5045 possibly be what you were thinking of? The only other things I saw that were semi-related were PRs for the @const tag, #7426, and #6525.

[benmccann]

it looks like this is adding a new one for srcset_url_equal. I'm guessing this PR was not regenerated after #8868

[dummdidumm]

What's an example snippet which shows how the code is smaller now?

[benmccann]

This is probably not how I'd actually write this code, but is thrown together as a demo.

Input

<script>
    import avif from './example.avif';
    import webp from './example.webp';
    import img from './example.png?fallback'
</script>

<picture>
    <source srcset={avif} type="image/avif">
    <source srcset={webp} type="image/webp">
    <img src={img.src} width={img.w} height={img.h} alt="Living Carbon">
</picture>

PR

import {
	SvelteComponent,
	claim_element,
	detach,
	element,
	get_svelte_dataset,
	init,
	insert_hydration,
	noop,
	safe_not_equal
} from "svelte/internal";

import "svelte/internal/disclose-version";
import avif from './example.avif';
import webp from './example.webp';
import img from './example.png?fallback';

function create_fragment(ctx) {
	let picture;
	let textContent = `<source srcset="${avif}" type="image/avif"/> <source srcset="${webp}" type="image/webp"/> <img src="${img.src}" width="${img.w}" height="${img.h}" alt="Living Carbon"/>`;

	return {
		c() {
			picture = element("picture");
			picture.innerHTML = textContent;
		},
		l(nodes) {
			picture = claim_element(nodes, "PICTURE", { ["data-svelte-h"]: true });
			if (get_svelte_dataset(picture) !== "svelte-1ob4jd") picture.innerHTML = textContent;
		},
		m(target, anchor) {
			insert_hydration(target, picture, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) {
				detach(picture);
			}
		}
	};
}

class Component extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, {});
	}
}

export default Component;

main

import {
	SvelteComponent,
	append_hydration,
	attr,
	children,
	claim_element,
	claim_space,
	detach,
	element,
	init,
	insert_hydration,
	noop,
	safe_not_equal,
	space,
	src_url_equal,
	srcset_url_equal
} from "svelte/internal";

import "svelte/internal/disclose-version";
import avif from './example.avif';
import webp from './example.webp';
import img from './example.png?fallback';

function create_fragment(ctx) {
	let picture;
	let source0;
	let source0_srcset_value;
	let t0;
	let source1;
	let source1_srcset_value;
	let t1;
	let img_1;
	let img_1_src_value;
	let img_1_width_value;
	let img_1_height_value;

	return {
		c() {
			picture = element("picture");
			source0 = element("source");
			t0 = space();
			source1 = element("source");
			t1 = space();
			img_1 = element("img");
			this.h();
		},
		l(nodes) {
			picture = claim_element(nodes, "PICTURE", {});
			var picture_nodes = children(picture);
			source0 = claim_element(picture_nodes, "SOURCE", { srcset: true, type: true });
			t0 = claim_space(picture_nodes);
			source1 = claim_element(picture_nodes, "SOURCE", { srcset: true, type: true });
			t1 = claim_space(picture_nodes);

			img_1 = claim_element(picture_nodes, "IMG", {
				src: true,
				width: true,
				height: true,
				alt: true
			});

			picture_nodes.forEach(detach);
			this.h();
		},
		h() {
			if (!srcset_url_equal(source0, source0_srcset_value = avif)) attr(source0, "srcset", source0_srcset_value);
			attr(source0, "type", "image/avif");
			if (!srcset_url_equal(source1, source1_srcset_value = webp)) attr(source1, "srcset", source1_srcset_value);
			attr(source1, "type", "image/webp");
			if (!src_url_equal(img_1.src, img_1_src_value = img.src)) attr(img_1, "src", img_1_src_value);
			attr(img_1, "width", img_1_width_value = img.w);
			attr(img_1, "height", img_1_height_value = img.h);
			attr(img_1, "alt", "Living Carbon");
		},
		m(target, anchor) {
			insert_hydration(target, picture, anchor);
			append_hydration(picture, source0);
			append_hydration(picture, t0);
			append_hydration(picture, source1);
			append_hydration(picture, t1);
			append_hydration(picture, img_1);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) {
				detach(picture);
			}
		}
	};
}

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, {});
	}
}

export default App;

[dummdidumm]

Thanks for the code snippet! Could you add a changeset? Then we're good to merge.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2d18307

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR