From 46ecf466281450caedff5915cecde7a9fe3fdde0 Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Thu, 30 Mar 2023 20:57:57 +0200 Subject: [PATCH] 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 | 6 +++++ .../services/vendor/squoosh/copy-wasm.ts | 26 +++++++++++++++---- .../astro/src/assets/vite-plugin-assets.ts | 12 +++++---- packages/astro/src/core/build/generate.ts | 11 ++++++++ packages/integrations/image/src/index.ts | 13 ---------- .../image/src/vendor/squoosh/copy-wasm.ts | 24 ----------------- 6 files changed, 45 insertions(+), 47 deletions(-) create mode 100644 .changeset/proud-buckets-fly.md delete mode 100644 packages/integrations/image/src/vendor/squoosh/copy-wasm.ts diff --git a/.changeset/proud-buckets-fly.md b/.changeset/proud-buckets-fly.md new file mode 100644 index 0000000000..3243540c05 --- /dev/null +++ b/.changeset/proud-buckets-fly.md @@ -0,0 +1,6 @@ +--- +'astro': patch +'@astrojs/image': patch +--- + +Remove unnecessary `.wasm` files inside build output when possible diff --git a/packages/astro/src/assets/services/vendor/squoosh/copy-wasm.ts b/packages/astro/src/assets/services/vendor/squoosh/copy-wasm.ts index 1c742f3eac..63e7be568e 100644 --- a/packages/astro/src/assets/services/vendor/squoosh/copy-wasm.ts +++ b/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 }); - await fs.copyFile(srcPath, destPath); + copiedFiles.push({src: srcPath, dest: destPath}); } else if (s.isDirectory()) { - await copyDir(srcPath, destPath); + copiedFiles.push(...await listFiles(srcPath, destPath)); } })); + + return copiedFiles; } diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 52efe24874..a064a9ac89 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -185,12 +185,14 @@ export default function assets({ return; } - const dir = - settings.config.output === 'server' - ? settings.config.build.server - : settings.config.outDir; + if (settings.config.image.service === 'astro/assets/services/squoosh') { + const dir = + settings.config.output === 'server' + ? 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) { diff --git a/packages/astro/src/core/build/generate.ts b/packages/astro/src/core/build/generate.ts index e3b4ff2ed3..a89db40ad1 100644 --- a/packages/astro/src/core/build/generate.ts +++ b/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; } diff --git a/packages/integrations/image/src/index.ts b/packages/integrations/image/src/index.ts index d52ea38099..0a101724e3 100644 --- a/packages/integrations/image/src/index.ts +++ b/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)); - } - }, }, }; } diff --git a/packages/integrations/image/src/vendor/squoosh/copy-wasm.ts b/packages/integrations/image/src/vendor/squoosh/copy-wasm.ts deleted file mode 100644 index 1c742f3eac..0000000000 --- a/packages/integrations/image/src/vendor/squoosh/copy-wasm.ts +++ /dev/null @@ -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); - } - })); -}