perf: apply performance optimization to dev srcset (#12621)

sveltejs · Aug 27, 2024 · a01ac09 · a01ac09
1 parent ebaaa88
commit a01ac09
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/.changeset/tricky-hats-flow.md b/.changeset/tricky-hats-flow.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+perf: apply performance optimization to dev srcset
diff --git a/packages/enhanced-img/src/preprocessor.js b/packages/enhanced-img/src/preprocessor.js
@@ -281,18 +281,25 @@ function img_to_picture(content, node, image) {
 	let res = '<picture>';
 
 	for (const [format, srcset] of Object.entries(image.sources)) {
-		res += `<source srcset={"${srcset}"}${sizes_string} type="image/${format}" />`;
+		res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
 	}
 
 	res += `<img ${serialize_img_attributes(content, attributes, {
-		src: image.img.src.startsWith('__VITE_ASSET__') ? `{"${image.img.src}"}` : `"${image.img.src}"`,
+		src: to_value(image.img.src),
 		width: image.img.w,
 		height: image.img.h
 	})} />`;
 
 	return (res += '</picture>');
 }
 
+/**
+ * @param {string} src
+ */
+function to_value(src) {
+	return src.startsWith('__VITE_ASSET__') ? `{"${src}"}` : `"${src}"`;
+}
+
 /**
  * For images like `<img src={manually_imported} />`
  * @param {string} content

diff --git a/packages/enhanced-img/test/Input.svelte b/packages/enhanced-img/test/Input.svelte
@@ -10,27 +10,29 @@
 
 {foo}
 
-<img src="./foo.png" alt="non-enhanced test" />
+<img src="./dev.png" alt="non-enhanced test" />
 
-<enhanced:img src="./foo.png" alt="basic test" />
+<enhanced:img src="./dev.png" alt="dev test" />
 
-<enhanced:img src="./foo.png" width="5" height="10" alt="dimensions test" />
+<enhanced:img src="./prod.png" alt="production test" />
 
-<enhanced:img src="./foo.png?blur=5" alt="directive test" />
+<enhanced:img src="./dev.png" width="5" height="10" alt="dimensions test" />
 
-<enhanced:img src="./foo.png" {...{ foo }} alt="spread attributes test" />
+<enhanced:img src="./dev.png?blur=5" alt="directive test" />
+
+<enhanced:img src="./dev.png" {...{ foo }} alt="spread attributes test" />
 
 <enhanced:img
-	src="./foo.png?w=1024,640,320"
+	src="./dev.png?w=1024,640,320"
 	sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw"
 	alt="sizes test"
 />
 
-<enhanced:img src="./foo.png" on:click={(foo = 'clicked an image!')} alt="event handler test" />
+<enhanced:img src="./dev.png" on:click={(foo = 'clicked an image!')} alt="event handler test" />
 
-<enhanced:img src="$lib/foo.png" alt="alias test" />
+<enhanced:img src="$lib/dev.png" alt="alias test" />
 
-<enhanced:img src="/src/foo.png" alt="absolute path test" />
+<enhanced:img src="/src/dev.png" alt="absolute path test" />
 
 <enhanced:img {src} alt="attribute shorthand test" />
 
@@ -41,7 +43,7 @@
 {/each}
 
 <picture>
-	<source src="./foo.avif" />
-	<source srcset="./foo.avif 500v ./bar.avif 100v" />
-	<source srcset="./foo.avif, ./bar.avif 1v" />
+	<source src="./dev.avif" />
+	<source srcset="./dev.avif 500v ./bar.avif 100v" />
+	<source srcset="./dev.avif, ./bar.avif 1v" />
 </picture>
diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
@@ -13,23 +13,25 @@
 
 {foo}
 
-<img src="./foo.png" alt="non-enhanced test" />
+<img src="./dev.png" alt="non-enhanced test" />
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="basic test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="dev test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>
+<picture><source srcset={"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w"} type="image/avif" /><source srcset={"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w"} type="image/webp" /><source srcset={"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"} type="image/png" /><img src={"__VITE_ASSET__2AM7_y_g__"} alt="production test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="directive test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="directive test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset={"/3 1440w, /4 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset={"5 1440w, /6 960w"} sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" {...{ foo }} alt="spread attributes test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/avif" /><source srcset="/3 1440w, /4 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/webp" /><source srcset="5 1440w, /6 960w" sizes="(min-width: 60rem) 80vw, (min-width: 40rem) 90vw, 100vw" type="image/png" /><img src="/7" alt="sizes test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="alias test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" on:click={(foo = 'clicked an image!')} alt="event handler test" width=1440 height=1440 /></picture>
 
-<picture><source srcset={"/1 1440w, /2 960w"} type="image/avif" /><source srcset={"/3 1440w, /4 960w"} type="image/webp" /><source srcset={"5 1440w, /6 960w"} type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="alias test" width=1440 height=1440 /></picture>
+
+<picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src="/7" alt="absolute path test" width=1440 height=1440 /></picture>
 
 {#if typeof src === 'string'}
 	<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
@@ -58,7 +60,7 @@
 {/each}
 
 <picture>
-	<source src="./foo.avif" />
-	<source srcset="./foo.avif 500v ./bar.avif 100v" />
-	<source srcset="./foo.avif, ./bar.avif 1v" />
+	<source src="./dev.avif" />
+	<source srcset="./dev.avif 500v ./bar.avif 100v" />
+	<source srcset="./dev.avif, ./bar.avif 1v" />
 </picture>
diff --git a/packages/enhanced-img/test/preprocessor.spec.js b/packages/enhanced-img/test/preprocessor.spec.js
@@ -20,8 +20,13 @@ it('Image preprocess snapshot test', async () => {
 				},
 				// @ts-ignore
 				imagetools_plugin: {
-					load() {
-						return 'export default {sources:{avif:"/1 1440w, /2 960w",webp:"/3 1440w, /4 960w",png:"5 1440w, /6 960w"},img:{src:"/7",w:1440,h:1440}};';
+					load(id) {
+						if (id.includes('dev')) {
+							return 'export default {sources:{avif:"/1 1440w, /2 960w",webp:"/3 1440w, /4 960w",png:"5 1440w, /6 960w"},img:{src:"/7",w:1440,h:1440}};';
+						} else if (id.includes('prod')) {
+							return 'export default {sources:{avif:"__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w",webp:"__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w",png:"__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w"},img:{src:"__VITE_ASSET__2AM7_y_g__",w:1440,h:1440}};';
+						}
+						throw new Error(`unrecognized id ${id}`);
 					}
 				}
 			})