[@astrojs/image] adding caching support for SSG builds

[tony-sull]

Changes

Adds caching support for transformed images 🎉

Testing

Tests added to verify images are cached during SSG builds

Docs

integration README updated with details on how to configure or disable caching

/cc @withastro/maintainers-docs

Tested in Netlify with an astro.build PR build

First run (no images cached)

Second run (1 image file updated, the rest cached)

[changeset-bot]

🦋 Changeset detected

Latest commit: 55e90b7

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[tony-sull]

!preview imgcache

[github-actions]

 > [email protected] release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--imgcache" > [email protected] build /home/runner/work/astro/astro > turbo run build --output-logs=new-only --no-deps --filter=astro --filter=create-astro --filter="@astrojs/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/lit, @astrojs/markdown-component, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/turbolinks, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 27 packages�[0m �[2m• Remote computation caching enabled (experimental)�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2m3f9cad99c4f1cc31�[0m �[33mcreate-astro:build: �[0mcache hit, suppressing output �[2mf4c365412fef3103�[0m �[34m@astrojs/prism:build: �[0mcache hit, suppressing output �[2m4f9f5d73777a6aa7�[0m �[36m@astrojs/telemetry:build: �[0mcache miss, executing �[2m085ad0f86312a9c4�[0m �[35m@astrojs/markdown-remark:build: �[0mcache miss, executing �[2mbf2cb06b3c9d46dd�[0m �[36m@astrojs/telemetry:build: �[0m �[36m@astrojs/telemetry:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/telemetry �[36m@astrojs/telemetry:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/telemetry:build: �[0m �[35m@astrojs/markdown-remark:build: �[0m �[35m@astrojs/markdown-remark:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/markdown/remark �[35m@astrojs/markdown-remark:build: �[0m> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json �[35m@astrojs/markdown-remark:build: �[0m �[32mastro:build: �[0mcache miss, executing �[2m80ef1fa17ee1009f�[0m �[32mastro:build: �[0m �[32mastro:build: �[0m> [email protected] build /home/runner/work/astro/astro/packages/astro �[32mastro:build: �[0m> pnpm run prebuild && astro-scripts build "src/**/*.ts" && tsc �[32mastro:build: �[0m �[32mastro:build: �[0m �[32mastro:build: �[0m> [email protected] prebuild /home/runner/work/astro/astro/packages/astro �[32mastro:build: �[0m> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts" �[32mastro:build: �[0m �[33m@astrojs/mdx:build: �[0mcache miss, executing �[2m6801a65dcffb4afa�[0m �[35m@astrojs/react:build: �[0mcache miss, executing �[2m38f1d894d7719a24�[0m �[34m@astrojs/solid-js:build: �[0mcache miss, executing �[2mfecb5ce76cb0e082�[0m �[35m@astrojs/prefetch:build: �[0mcache miss, executing �[2m519e31a81de617f3�[0m �[34m@astrojs/sitemap:build: �[0mcache miss, executing �[2m1a728b01cfee8aad�[0m �[36m@astrojs/vue:build: �[0mcache miss, executing �[2m175ad513c4f6a58a�[0m �[36m@astrojs/deno:build: �[0mcache miss, executing �[2mf0d82edda4ba27b3�[0m �[33m@astrojs/node:build: �[0mcache miss, executing �[2m70017a1700a058ee�[0m �[32m@astrojs/alpinejs:build: �[0mcache miss, executing �[2me7213a3520baed6a�[0m �[32m@astrojs/tailwind:build: �[0mcache miss, executing �[2m565665f49fd9cb6c�[0m �[33m@astrojs/mdx:build: �[0m �[33m@astrojs/mdx:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/mdx �[33m@astrojs/mdx:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/mdx:build: �[0m �[33m@astrojs/node:build: �[0m �[33m@astrojs/node:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/node �[33m@astrojs/node:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/node:build: �[0m �[32m@astrojs/tailwind:build: �[0m �[32m@astrojs/tailwind:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/tailwind �[32m@astrojs/tailwind:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/tailwind:build: �[0m �[35m@astrojs/react:build: �[0m �[35m@astrojs/react:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/react �[35m@astrojs/react:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/react:build: �[0m �[34m@astrojs/solid-js:build: �[0m �[34m@astrojs/solid-js:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/solid �[34m@astrojs/solid-js:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/solid-js:build: �[0m �[35m@astrojs/prefetch:build: �[0m �[35m@astrojs/prefetch:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/prefetch �[35m@astrojs/prefetch:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/prefetch:build: �[0m �[34m@astrojs/sitemap:build: �[0m �[34m@astrojs/sitemap:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/sitemap �[34m@astrojs/sitemap:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/sitemap:build: �[0m �[32m@astrojs/alpinejs:build: �[0m �[32m@astrojs/alpinejs:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/alpinejs �[32m@astrojs/alpinejs:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/alpinejs:build: �[0m �[36m@astrojs/vue:build: �[0m �[36m@astrojs/vue:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vue �[36m@astrojs/vue:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[36m@astrojs/vue:build: �[0m �[36m@astrojs/deno:build: �[0m �[36m@astrojs/deno:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/deno �[36m@astrojs/deno:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/deno:build: �[0m [ERROR] Error uploading artifacts to HTTP cache: archive/tar: write too long �[33m@astrojs/rss:build: �[0mcache miss, executing �[2m94d6c5c35573f875�[0m �[34m@astrojs/vercel:build: �[0mcache miss, executing �[2m7df322e6b0142248�[0m �[35m@astrojs/svelte:build: �[0mcache miss, executing �[2mfa64a55575e4c80a�[0m �[32m@astrojs/lit:build: �[0mcache miss, executing �[2mb8f20a5f6edbc992�[0m �[36m@astrojs/netlify:build: �[0mcache miss, executing �[2mdee57a44b0c34e6f�[0m �[33m@astrojs/turbolinks:build: �[0mcache miss, executing �[2m34fba3d85d70e2af�[0m �[34m@astrojs/image:build: �[0mcache miss, executing �[2m8124ea62a4622c01�[0m �[36m@astrojs/preact:build: �[0mcache miss, executing �[2mf6762f9f2a03c98d�[0m �[33m@astrojs/rss:build: �[0m �[33m@astrojs/rss:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/astro-rss �[33m@astrojs/rss:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/rss:build: �[0m �[34m@astrojs/vercel:build: �[0m �[34m@astrojs/vercel:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vercel �[34m@astrojs/vercel:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/vercel:build: �[0m �[35m@astrojs/svelte:build: �[0m �[35m@astrojs/svelte:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/svelte �[35m@astrojs/svelte:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[35m@astrojs/svelte:build: �[0m �[32m@astrojs/lit:build: �[0m �[32m@astrojs/lit:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/lit �[32m@astrojs/lit:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/lit:build: �[0m �[36m@astrojs/netlify:build: �[0m �[36m@astrojs/netlify:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/netlify �[36m@astrojs/netlify:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/netlify:build: �[0m �[33m@astrojs/turbolinks:build: �[0m �[33m@astrojs/turbolinks:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/turbolinks �[33m@astrojs/turbolinks:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/turbolinks:build: �[0m �[32m@astrojs/cloudflare:build: �[0mcache miss, executing �[2mfcf442d05d9892bf�[0m �[34m@astrojs/image:build: �[0m �[34m@astrojs/image:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/image �[34m@astrojs/image:build: �[0m> astro-scripts build "src/**/*.ts" && tsc && pnpm run postbuild �[34m@astrojs/image:build: �[0m �[36m@astrojs/preact:build: �[0m �[36m@astrojs/preact:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/preact �[36m@astrojs/preact:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/preact:build: �[0m �[32m@astrojs/cloudflare:build: �[0m �[32m@astrojs/cloudflare:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/cloudflare �[32m@astrojs/cloudflare:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/cloudflare:build: �[0m �[33m@astrojs/partytown:build: �[0mcache miss, executing �[2m1d0cf90000933d53�[0m �[33m@astrojs/partytown:build: �[0m �[33m@astrojs/partytown:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/partytown �[33m@astrojs/partytown:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/partytown:build: �[0m �[34m@astrojs/image:build: �[0m �[34m@astrojs/image:build: �[0m> @astrojs/[email protected] postbuild /home/runner/work/astro/astro/packages/integrations/image �[34m@astrojs/image:build: �[0m> astro-scripts copy "src/**/*.wasm" �[34m@astrojs/image:build: �[0m Tasks: 26 successful, 26 total Cached: 3 cached, 26 total Time: 1m4.894s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--imgcache tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[36minfo�[39m astro is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 1.0.1 is already published on npm 🦋 �[36minfo�[39m @astrojs/rss is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m create-astro is not being published because version 1.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.1.2 is already published on npm 🦋 �[36minfo�[39m @astrojs/cloudflare is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/deno is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/image is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 1.0.1 is already published on npm 🦋 �[36minfo�[39m @astrojs/mdx is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/netlify is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/node is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.0.0 is already published on npm 🦋 �[36minfo�[39m @astrojs/preact is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.0.7 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 1.1.4 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 1.1.0 is already published on npm 🦋 �[36minfo�[39m @astrojs/svelte is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/tailwind is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.1.4 is already published on npm 🦋 �[36minfo�[39m @astrojs/vercel is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/vue is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.1 is already published on npm 🦋 �[36minfo�[39m @astrojs/markdown-remark is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[36minfo�[39m @astrojs/telemetry is being published because our local version (0.0.0-imgcache-20220929145446) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 1.1.0 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"astro"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/rss"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/cloudflare"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/deno"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/image"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/mdx"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/netlify"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/node"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/preact"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/svelte"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/tailwind"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/vercel"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/vue"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/markdown-remark"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[36minfo�[39m Publishing �[36m"@astrojs/telemetry"�[39m at �[32m"0.0.0-imgcache-20220929145446"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 [email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 @astrojs/[email protected] 🦋 Creating git tags... 🦋 New tag: [email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected] 🦋 New tag: @astrojs/[email protected]

[natemoo-re]

Just wanted to check that you saw #4765 ? I don't think we need to leap to a final, built-in abstraction just yet, but it'd be great if this work for @astrojs/image was agnostic enough that it could lead to a generic caching mechanism for other integrations down the road.

[tony-sull]

Just wanted to check that you saw #4765 ? I don't think we need to leap to a final, built-in abstraction just yet, but it'd be great if this work for @astrojs/image was agnostic enough that it could lead to a generic caching mechanism for other integrations down the road.

Agreed! I'm hoping this can turn into a general caching solution for Astro. I didn't go down the path of a full API for core here, but there really isn't anything image-specific in this implementation 👍