Remove unnecessary image-related .wasm files inside build output when possible (#6701)

* fix(image): Remove unnecessary .wasm files after build

* chore: changeset

.changeset/proud-buckets-fly.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/image': patch
+---
+
+Remove unnecessary `.wasm` files inside build output when possible

packages/astro/src/assets/services/vendor/squoosh/copy-wasm.ts

@@ -4,21 +4,37 @@ import { fileURLToPath } from 'node:url';
 
 export async function copyWasmFiles(dir: URL) {
 	const src = new URL('./', import.meta.url);
-	await copyDir(fileURLToPath(src), fileURLToPath(dir));
+	const fileList = await listFiles(fileURLToPath(src), fileURLToPath(dir));
+
+	for (let file of fileList) {
+		await fs.mkdir(path.dirname(file.dest), { recursive: true });
+		await fs.copyFile(file.src, file.dest);
+	}
 }
 
-async function copyDir(src: string, dest: string) {
+export async function deleteWasmFiles(dir: URL) {
+	const src = new URL('./', import.meta.url);
+	const fileList = await listFiles(fileURLToPath(src), fileURLToPath(dir));
+
+	for (let file of fileList) {
+		await fs.rm(file.dest);
+	}
+}
+
+async function listFiles(src: string, dest: string) {
 	const itemNames = await fs.readdir(src);
+	const copiedFiles: {src: string, dest: string}[] = []
 	await Promise.all(itemNames.map(async (srcName) => {
 		const srcPath = path.join(src, srcName);
 		const destPath = path.join(dest, srcName);
 		const s = await fs.stat(srcPath);
 		if (s.isFile() && /.wasm$/.test(srcPath)) {
-			await fs.mkdir(path.dirname(destPath), { recursive: true });
+			copiedFiles.push({src: srcPath, dest: destPath});
-			await fs.copyFile(srcPath, destPath);
 		}
 		else if (s.isDirectory()) {
-			await copyDir(srcPath, destPath);
+			copiedFiles.push(...await listFiles(srcPath, destPath));
 		}
 	}));
+
+	return copiedFiles;
 }

packages/astro/src/assets/vite-plugin-assets.ts

@@ -185,12 +185,14 @@ export default function assets({
 					return;
 				}
 
-				const dir =
+				if (settings.config.image.service === 'astro/assets/services/squoosh') {
-					settings.config.output === 'server'
+					const dir =
-						? settings.config.build.server
+						settings.config.output === 'server'
-						: settings.config.outDir;
+							? settings.config.build.server
+							: settings.config.outDir;
 
-				await copyWasmFiles(new URL('./chunks', dir));
+					await copyWasmFiles(new URL('./chunks', dir));
+				}
 			},
 			// In build, rewrite paths to ESM imported images in code to their final location
 			async renderChunk(code) {

packages/astro/src/core/build/generate.ts

@@ -18,6 +18,7 @@ import {
 	generateImage as generateImageInternal,
 	getStaticImageList,
 } from '../../assets/internal.js';
+import { deleteWasmFiles } from '../../assets/services/vendor/squoosh/copy-wasm.js';
 import { hasPrerenderedPages, type BuildInternals } from '../../core/build/internal.js';
 import {
 	prependForwardSlash,
@@ -110,6 +111,16 @@ export async function generatePages(opts: StaticBuildOptions, internals: BuildIn
 		for (const imageData of getStaticImageList()) {
 			await generateImage(opts, imageData[1].options, imageData[1].path);
 		}
+
+		// Our Squoosh image service loads `.wasm` files relatively, so we need to copy the WASM files to the dist
+		// for the image generation to work. In static output, we can remove those after the build is done.
+		if (
+			opts.settings.config.image.service === 'astro/assets/services/squoosh' &&
+			opts.settings.config.output === 'static'
+		) {
+			await deleteWasmFiles(new URL('./chunks', opts.settings.config.outDir));
+		}
+
 		delete globalThis.astroAsset.addStaticImage;
 	}
 

packages/integrations/image/src/index.ts

@@ -3,7 +3,6 @@ import { ssgBuild } from './build/ssg.js';
 import type { ImageService, SSRImageService, TransformOptions } from './loaders/index.js';
 import type { LoggerLevel } from './utils/logger.js';
 import { joinPaths, prependForwardSlash, propsToFilename } from './utils/paths.js';
-import { copyWasmFiles } from './vendor/squoosh/copy-wasm.js';
 import { createPlugin } from './vite-plugin-astro-image.js';
 
 export { getImage } from './lib/get-image.js';
@@ -143,13 +142,6 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
 				// for SSG builds, build all requested image transforms to dist
 				const loader = globalThis?.astroImage?.loader;
 
-				if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
-					// For the Squoosh service, copy all wasm files to dist/chunks.
-					// Because the default loader is dynamically imported (above),
-					// Vite will bundle squoosh to dist/chunks and expect to find the wasm files there
-					await copyWasmFiles(new URL('./chunks', dir));
-				}
-
 				if (loader && 'transform' in loader && staticImages.size > 0) {
 					const cacheDir = !!resolvedOptions.cacheDir
 						? new URL(resolvedOptions.cacheDir, _config.root)
@@ -165,11 +157,6 @@ export default function integration(options: IntegrationOptions = {}): AstroInte
 					});
 				}
 			},
-			'astro:build:ssr': async () => {
-				if (resolvedOptions.serviceEntryPoint === '@astrojs/image/squoosh') {
-					await copyWasmFiles(new URL('./chunks/', _buildConfig.server));
-				}
-			},
 		},
 	};
 }

packages/integrations/image/src/vendor/squoosh/copy-wasm.ts

@@ -1,24 +0,0 @@
-import fs from 'node:fs/promises';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-export async function copyWasmFiles(dir: URL) {
-	const src = new URL('./', import.meta.url);
-	await copyDir(fileURLToPath(src), fileURLToPath(dir));
-}
-
-async function copyDir(src: string, dest: string) {
-	const itemNames = await fs.readdir(src);
-	await Promise.all(itemNames.map(async (srcName) => {
-		const srcPath = path.join(src, srcName);
-		const destPath = path.join(dest, srcName);
-		const s = await fs.stat(srcPath);
-		if (s.isFile() && /.wasm$/.test(srcPath)) {
-			await fs.mkdir(path.dirname(destPath), { recursive: true });
-			await fs.copyFile(srcPath, destPath);
-		}
-		else if (s.isDirectory()) {
-			await copyDir(srcPath, destPath);
-		}
-	}));
-}