fix(astro): fix svg content-based deduplication (#14031)

Co-authored-by: Matt Kane <[email protected]>
Co-authored-by: Emanuele Stoppa <[email protected]>

Author: 3 people

.changeset/chubby-falcons-fly.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Optimized the build pipeline for SVG images. Now, Astro doesn't reprocess images that have already been processed. 

packages/astro/src/assets/utils/node/emitAsset.ts

@@ -2,13 +2,57 @@ import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import type * as vite from 'vite';
+import { generateContentHash } from '../../../core/encryption.js';
 import { prependForwardSlash, slash } from '../../../core/path.js';
 import type { ImageMetadata } from '../../types.js';
 import { imageMetadata } from '../metadata.js';
 
 type FileEmitter = vite.Rollup.EmitFile;
 type ImageMetadataWithContents = ImageMetadata & { contents?: Buffer };
 
+type SvgCacheKey = { hash: string };
+
+// Global cache for SVG content deduplication
+const svgContentCache = new WeakMap<SvgCacheKey, { handle: string; filename: string }>();
+
+const keyRegistry = new Map<string, SvgCacheKey>();
+
+function keyFor(hash: string): SvgCacheKey {
+	let key = keyRegistry.get(hash);
+	if (!key) {
+		key = { hash };
+		keyRegistry.set(hash, key);
+	}
+	return key;
+}
+
+/**
+ * Handles SVG deduplication by checking if the content already exists in cache.
+ */
+async function handleSvgDeduplication(
+	fileData: Buffer,
+	filename: string,
+	fileEmitter: FileEmitter
+): Promise<string> {
+	const contentHash = await generateContentHash(fileData);
+	const key = keyFor(contentHash);
+	const existing = svgContentCache.get(key);
+	
+	if (existing) {
+		// Reuse existing handle for duplicate SVG content
+		return existing.handle;
+	} else {
+		// First time seeing this SVG content - emit it
+		const handle = fileEmitter({
+			name: filename,
+			source: fileData,
+			type: 'asset',
+		});
+		svgContentCache.set(key, { handle, filename });
+		return handle;
+	}
+}
+
 /**
  * Processes an image file and emits its metadata and optionally its contents. This function supports both build and development modes.
  *
@@ -62,13 +106,20 @@ export async function emitESMImage(
 		const filename = path.basename(pathname, path.extname(pathname) + `.${fileMetadata.format}`);
 
 		try {
-			// fileEmitter throws in dev
-			const handle = fileEmitter!({
-				name: filename,
-				source: await fs.readFile(url),
-				type: 'asset',
-			});
-
+			let handle: string;
+			
+			if (fileMetadata.format === 'svg') {
+				// check if this content already exists
+				handle = await handleSvgDeduplication(fileData, filename, fileEmitter!);
+			} else {
+				// Non-SVG assets: emit normally
+				handle = fileEmitter!({
+					name: filename,
+					source: fileData,
+					type: 'asset',
+				});
+			}
+			
 			emittedImage.src = `__ASTRO_ASSET_IMAGE__${handle}__`;
 		} catch {
 			isBuild = false;
@@ -131,13 +182,20 @@ export async function emitImageMetadata(
 		const filename = path.basename(pathname, path.extname(pathname) + `.${fileMetadata.format}`);
 
 		try {
-			// fileEmitter throws in dev
-			const handle = fileEmitter!({
-				name: filename,
-				source: await fs.readFile(url),
-				type: 'asset',
-			});
-
+			let handle: string;
+			
+			if (fileMetadata.format === 'svg') {
+				// check if this content already exists
+				handle = await handleSvgDeduplication(fileData, filename, fileEmitter!);
+			} else {
+				// Non-SVG assets: emit normally
+				handle = fileEmitter!({
+					name: filename,
+					source: fileData,
+					type: 'asset',
+				});
+			}
+			
 			emittedImage.src = `__ASTRO_ASSET_IMAGE__${handle}__`;
 		} catch {
 			isBuild = false;

packages/astro/src/core/encryption.ts

@@ -123,3 +123,14 @@ export async function generateCspDigest(data: string, algorithm: CspAlgorithm):
 	const hash = encodeBase64(new Uint8Array(hashBuffer));
 	return `${ALGORITHMS[algorithm]}${hash}`;
 }
+
+/**
+ * Generate SHA-256 hash of buffer. 
+ * @param {ArrayBuffer} data The buffer data to hash
+ * @returns {Promise<string>} A hex string of the first 16 characters of the SHA-256 hash
+ */
+export async function generateContentHash(data: ArrayBuffer): Promise<string> {
+	const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+	const hashArray = new Uint8Array(hashBuffer);
+	return encodeBase64(hashArray);
+}

packages/astro/test/fixtures/svg-deduplication/astro.config.mjs

@@ -0,0 +1,3 @@
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({});

packages/astro/test/fixtures/svg-deduplication/package.json

@@ -0,0 +1,8 @@
+{
+	"name": "@test/svg-deduplication",
+	"version": "0.0.0",
+	"private": true,
+	"dependencies": {
+		"astro": "workspace:*"
+	}
+}

packages/astro/test/fixtures/svg-deduplication/src/assets/duplicate1.svg

@@ -0,0 +1,22 @@
+---
+import Duplicate1 from '../assets/duplicate1.svg';
+import Duplicate2 from '../assets/duplicate2.svg';
+import Unique from '../assets/unique.svg';
+---
+
+<html>
+<head>
+	<title>SVG Deduplication Test</title>
+</head>
+<body>
+	<div id="duplicate1">
+		<Duplicate1 />
+	</div>
+	<div id="duplicate2">
+		<Duplicate2 />
+	</div>
+	<div id="unique">
+		<Unique />
+	</div>
+</body>
+</html>

packages/astro/test/fixtures/svg-deduplication/src/assets/duplicate2.svg

@@ -0,0 +1,10 @@
+{
+	"extends": "../../../tsconfigs/strictest.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"~/*": ["./src/*"]
+		}
+	},
+	"include": ["src/**/*"]
+}