From ae59f60421ed49a029f58db702250ac0ba3c966e Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 28 Aug 2024 13:55:37 -0700
Subject: [PATCH] perf: hoist vite asset declarations to module block

---
 .changeset/friendly-wasps-return.md       |  5 ++
 packages/enhanced-img/src/preprocessor.js | 64 +++++++++++++++++------
 packages/enhanced-img/test/Output.svelte  | 12 +++--
 3 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/friendly-wasps-return.md

diff --git a/.changeset/friendly-wasps-return.md b/.changeset/friendly-wasps-return.md
new file mode 100644
index 000000000000..c2861781db9c
--- /dev/null
+++ b/.changeset/friendly-wasps-return.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+perf: hoist vite asset declarations to module block
diff --git a/packages/enhanced-img/src/preprocessor.js b/packages/enhanced-img/src/preprocessor.js
index aad4b6d955bf..0adf1306a9dd 100644
--- a/packages/enhanced-img/src/preprocessor.js
+++ b/packages/enhanced-img/src/preprocessor.js
@@ -5,8 +5,6 @@ import MagicString from 'magic-string';
 import { asyncWalk } from 'estree-walker';
 import { parse } from 'svelte-parse-markup';
 
-const ASSET_PREFIX = '___ASSET___';
-
 // TODO: expose this in vite-imagetools rather than duplicating it
 const OPTIMIZABLE = /^[^?]+\.(avif|heif|gif|jpeg|jpg|png|tiff|webp)(\?.*)?$/;
 
@@ -35,11 +33,20 @@ export function image(opts) {
 			const s = new MagicString(content);
 			const ast = parse(content, { filename });
 
-			// Import path to import name
-			// e.g. ./foo.png => ___ASSET___0
-			/** @type {Map<string, string>} */
+			/**
+			 * Import path to import name
+			 * e.g. ./foo.png => __IMPORTED_ASSET_0__
+			 * @type {Map<string, string>}
+			 */
 			const imports = new Map();
 
+			/**
+			 * Vite name to declaration name
+			 * e.g. __VITE_ASSET_0__ => __DECLARED_ASSET_0__
+			 * @type {Map<string, string>}
+			 */
+			const consts = new Map();
+
 			/**
 			 * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
 			 * @param {{ type: string, start: number, end: number, raw: string }} src_attribute
@@ -94,10 +101,10 @@ export function image(opts) {
 						image = await process(resolved_id, opts);
 						images.set(resolved_id, image);
 					}
-					s.update(node.start, node.end, img_to_picture(content, node, image));
+					s.update(node.start, node.end, img_to_picture(consts, content, node, image));
 				} else {
-					// e.g. <img src="./foo.svg" /> => <img src={___ASSET___0} />
-					const name = ASSET_PREFIX + imports.size;
+					// e.g. <img src="./foo.svg" /> => <img src={__IMPORTED_ASSET_0__} />
+					const name = '__IMPORTED_ASSET_' + imports.size + '__';
 					const { start, end } = src_attribute;
 					// update src with reference to imported asset
 					s.update(
@@ -131,15 +138,28 @@ export function image(opts) {
 
 			// add imports
 			if (imports.size) {
-				let import_text = '';
+				let text = '';
 				for (const [path, import_name] of imports.entries()) {
-					import_text += `import ${import_name} from "${path}";`;
+					text += `import ${import_name} from "${path}";`;
 				}
 				if (ast.instance) {
 					// @ts-ignore
-					s.appendLeft(ast.instance.content.start, import_text);
+					s.appendLeft(ast.instance.content.start, text);
+				} else {
+					s.prepend(`<script>${text}</script>`);
+				}
+			}
+
+			if (consts.size) {
+				let text = '';
+				for (const [vite_name, declaration_name] of consts.entries()) {
+					text += `\tconst ${declaration_name} = "${vite_name}";\n`;
+				}
+				if (ast.module) {
+					// @ts-ignore
+					s.appendLeft(ast.module.content.start, text);
 				} else {
-					s.append(`<script>${import_text}</script>`);
+					s.prepend(`<script context="module">\n${text}</script>\n`);
 				}
 			}
 
@@ -264,11 +284,12 @@ function stringToNumber(param) {
 }
 
 /**
+ * @param {Map<string,string>} consts
  * @param {string} content
  * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
  * @param {import('vite-imagetools').Picture} image
  */
-function img_to_picture(content, node, image) {
+function img_to_picture(consts, content, node, image) {
 	/** @type {Array<import('svelte/types/compiler/interfaces').BaseDirective | import('svelte/types/compiler/interfaces').Attribute | import('svelte/types/compiler/interfaces').SpreadAttribute>} attributes */
 	const attributes = node.attributes;
 	const index = attributes.findIndex((attribute) => attribute.name === 'sizes');
@@ -281,11 +302,11 @@ function img_to_picture(content, node, image) {
 	let res = '<picture>';
 
 	for (const [format, srcset] of Object.entries(image.sources)) {
-		res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
+		res += `<source srcset=${to_value(consts, srcset)}${sizes_string} type="image/${format}" />`;
 	}
 
 	res += `<img ${serialize_img_attributes(content, attributes, {
-		src: to_value(image.img.src),
+		src: to_value(consts, image.img.src),
 		width: image.img.w,
 		height: image.img.h
 	})} />`;
@@ -294,10 +315,19 @@ function img_to_picture(content, node, image) {
 }
 
 /**
+ * @param {Map<string, string>} consts
  * @param {string} src
  */
-function to_value(src) {
-	return src.startsWith('__VITE_ASSET__') ? `{"${src}"}` : `"${src}"`;
+function to_value(consts, src) {
+	if (src.startsWith('__VITE_ASSET__')) {
+		let var_name = consts.get(src);
+		if (!var_name) {
+			var_name = '__DECLARED_ASSET_' + consts.size + '__';
+			consts.set(src, var_name);
+		}
+		return `{${var_name}}`;
+	}
+	return `"${src}"`;
 }
 
 /**
diff --git a/packages/enhanced-img/test/Output.svelte b/packages/enhanced-img/test/Output.svelte
index 8e5ac49d5da1..9f3f88f25efe 100644
--- a/packages/enhanced-img/test/Output.svelte
+++ b/packages/enhanced-img/test/Output.svelte
@@ -1,5 +1,11 @@
+<script context="module">
+	const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
+	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
+	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
+	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
+</script>
 <script lang="ts">
-	import ___ASSET___0 from "./foo.svg";
+	import __IMPORTED_ASSET_0__ from "./foo.svg";
 	
 	import manual_image1 from './no.png';
 	
@@ -17,7 +23,7 @@
 
 <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={"__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={__DECLARED_ASSET_0__} type="image/avif" /><source srcset={__DECLARED_ASSET_1__} type="image/webp" /><source srcset={__DECLARED_ASSET_2__} type="image/png" /><img src={__DECLARED_ASSET_3__} 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" width="5" height="10" alt="dimensions test" width=1440 height=1440 /></picture>
 
@@ -44,7 +50,7 @@
 	</picture>
 {/if}
 
-<img src={___ASSET___0} alt="svg test" />
+<img src={__IMPORTED_ASSET_0__} alt="svg test" />
 
 {#each images as image}
 	{#if typeof image === 'string'}